import QueryString from 'qs';
import { axiosGet, axiosGetFull } from './actions';
import { apiProjectCategories, apiProjects, apiUrl } from './constants';
import moment from 'moment';
import 'moment/locale/es';

export const getProjects = async (props: any) => {
  const { locale = 'es', limit = -1, otherQueries = {} } = props;
  try {
    const query = QueryString.stringify(
      {
        locale: locale,
        sort: ['order:asc'],
        filters: {
          ...otherQueries
        },
        pagination: {
          limit: limit
        },
        fields: ['name', 'slug', 'showOnOwners', 'salesProgress', 'area', 'numberBathrooms', 'numberRooms'],
        populate: {
          thumbnail: {
            fields: ['url', 'width', 'height']
          },
          city: {
            fields: ['name', 'slug'],
            populate: {
              state: {
                fields: ['name', 'slug']
              }
            }
          },
          projectStatus: {
            fields: ['name']
          },
          projectSaleStage: {
            fields: ['name', 'labelColor', 'labelBackground']
          }
        }
      },
      {
        encodeValuesOnly: true
      }
    );

    let data: any = (await axiosGet(apiProjects, query)) || { data: null };

    data =
      (data &&
        Array.isArray(data) &&
        data?.length &&
        data?.map((element: any) => {
          return {
            ...element,
            thumbnail: { ...element?.thumbnail, url: apiUrl + element?.thumbnail?.url }
          };
        })) ||
      [];

    return data;
  } catch (error) {
    return [];
  }
};
const getFilteredCategoriesByLocaleAndType = (data: any, locale: any, type: string) => {
  return data
    ?.filter((item: any) => item.type === type)
    ?.flatMap((item: any) =>
      item.galleryCategories
        ?.filter((category: any) => category?.locale === 'es')
        ?.map((category: any) => ({
          name:
            locale === 'en' &&
            category?.localizations &&
            Array?.isArray(category?.localizations) &&
            category?.localizations?.length
              ? category?.localizations[0]?.name
              : category.name,
          slug:
            locale === 'en' &&
            category?.localizations &&
            Array?.isArray(category?.localizations) &&
            category?.localizations?.length
              ? category?.localizations[0]?.slug
              : category.slug
        }))
    );
};
const getFilteredImagesByLocaleAndType = (data: any, locale: string, type: any) => {
  return data
    ?.filter((item: any) => item.type === type)
    ?.flatMap((item: any) =>
      item.galleryCategories
        ?.filter((category: any) => category?.images && category?.images?.length && category?.locale === 'es')
        ?.flatMap((category: any) =>
          category?.images?.map((image: any) => ({
            ...image,
            url: apiUrl + image?.url,
            category:
              locale === 'en' &&
              category?.localizations &&
              Array?.isArray(category?.localizations) &&
              category?.localizations?.length
                ? category?.localizations[0]?.slug
                : category.slug
          }))
        )
    );
};
export const mapWithUrl = (dataArray: any[], key: string, apiUrl: string) => {
  if (!dataArray?.length) return null;

  return dataArray.map((item: any) => ({
    ...item,
    [key]: item?.[key]?.url ? { ...item[key], url: apiUrl + item[key].url } : null
  }));
};
export const addApiUrlToImage = (image: any) => {
  if (image && image?.url) {
    return {
      ...image,
      url: apiUrl + image.url
    };
  } else {
    return null;
  }
};
export const getProject = async (props: any) => {
  const { locale = 'es', slug = '' } = props;
  try {
    const query = QueryString.stringify(
      {
        locale: locale,
        filters: {
          slug: {
            $eq: slug
          }
        },
        pagination: {
          limit: 1
        },
        populate: {
          projectLinks: {
            fields: ['id', 'text', 'url', 'showInModal'],
            populate: {
              icon: {
                fields: ['url', 'width', 'height']
              }
            }
          },
          projectCommonAreas: {
            fields: ['id', 'title', 'order', 'text'],
            sort: ['order:asc'],
            populate: {
              image: {
                fields: ['url', 'width', 'height']
              }
            }
          },
          logo: {
            fields: ['url', 'width', 'height']
          },
          mapImage: {
            fields: ['url', 'width', 'height']
          },
          commonAreasImage: {
            fields: ['url', 'width', 'height']
          },
          downloadsImage: {
            fields: ['url', 'width', 'height']
          },
          locationImage: {
            fields: ['url', 'width', 'height']
          },
          projectSliders: {
            sort: ['order:asc'],
            populate: {
              image: {
                fields: ['url', 'width', 'height']
              }
            }
          },
          projectPartners: {
            populate: {
              logo: {
                fields: ['url', 'width', 'height']
              }
            }
          },
          welcomeGallery: {
            fields: ['order', 'type'],
            sort: ['order:asc'],
            populate: {
              media: {
                fields: ['url', 'width', 'height']
              }
            }
          },
          galleries: {
            fields: ['type'],
            populate: {
              galleryCategories: {
                fields: ['name', 'slug', 'order', 'locale'],
                sort: ['order:asc'],
                populate: {
                  images: {
                    fields: ['url', 'width', 'height']
                  }
                }
              }
            }
          },
          projectFacts: {
            fields: ['id', 'title', 'amount', 'category', 'prefix'],
            populate: {
              icon: {
                fields: ['url', 'width', 'height']
              }
            }
          },
          localizations: {
            fields: ['slug', 'welcomeText2', 'welcomeText2En', 'welcomePreTitleEn'], // Aseguramos que las localizaciones también los traigan
            populate: {
              projectSliders: {
                populate: {
                  image: {
                    fields: ['url', 'width', 'height']
                  }
                }
              },
              welcomeGallery: {
                fields: ['order', 'type'],
                sort: ['order:asc'],
                populate: {
                  media: {
                    fields: ['url', 'width', 'height']
                  }
                }
              },
              galleries: {
                fields: ['type'],
                populate: {
                  galleryCategories: {
                    fields: ['name', 'slug', 'order', 'locale'],
                    sort: ['order:asc'],
                    populate: {
                      images: {
                        fields: ['url', 'width', 'height']
                      },
                      localizations: {
                        fields: ['id', 'name', 'slug']
                      }
                    }
                  }
                }
              }
            }
          }
        }
      },
      {
        encodeValuesOnly: true
      }
    );

    let data: any = (await axiosGet(apiProjects, query)) || [];
    
    // AQUÍ ESTÁ EL CAMBIO CLAVE:
    data = data[0]
      ? {
          ...data[0],
          // Mantenemos explícitamente los campos de bienvenida (ES y EN)
          welcomeText2: data[0]?.welcomeText2,
          welcomeText2En: data[0]?.welcomeText2En,
          welcomePreTitle: data[0]?.welcomePreTitle,
          welcomePreTitleEn: data[0]?.welcomePreTitleEn,
          
          projectSliders:
            data[0]?.projectSliders?.length > 0
              ? data[0].projectSliders
              : data[0]?.localizations?.[0]?.projectSliders?.length > 0
              ? data[0].localizations[0].projectSliders
              : [],
          galleries:
            data[0]?.galleries?.length > 0
              ? data[0].galleries
              : data[0]?.localizations?.[0]?.galleries?.length > 0
              ? data[0].localizations[0].galleries
              : [],
          welcomeGallery:
            data[0]?.welcomeGallery?.length > 0
              ? data[0].welcomeGallery
              : data[0]?.localizations?.[0]?.welcomeGallery?.length > 0
              ? data[0].localizations[0].welcomeGallery
              : []
        }
      : null;

    if (data) {
      data = {
        ...data,
        mapImage: addApiUrlToImage(data?.mapImage),
        locationImage: addApiUrlToImage(data?.locationImage),
        downloadsImage: addApiUrlToImage(data?.downloadsImage),
        commonAreasImage: addApiUrlToImage(data?.commonAreasImage),
        projectPartners: mapWithUrl(data?.projectPartners, 'logo', apiUrl),
        projectLinks: mapWithUrl(data?.projectLinks, 'icon', apiUrl),
        projectFacts: mapWithUrl(data?.projectFacts, 'icon', apiUrl),
        projectSliders: mapWithUrl(data?.projectSliders, 'image', apiUrl),
        welcomeGallery: mapWithUrl(data?.welcomeGallery, 'media', apiUrl),
        projectCommonAreas: mapWithUrl(data?.projectCommonAreas, 'image', apiUrl),
        galleryCategories: getFilteredCategoriesByLocaleAndType(data?.galleries, locale, 'gallery'),
        galleryImages: getFilteredImagesByLocaleAndType(data?.galleries, locale, 'gallery')
      };
    }

    return data;
  } catch (error) {
    console.log(error);
    return null;
  }
};

export const getProjectCategories = async (props: any) => {
  const { locale = 'es', slug = '', view = '' } = props;
  try {
    const viewQuery =
      view === 'home'
        ? {
            showOnHome: true
          }
        : view === 'projects'
        ? {
            showOnProjects: true
          }
        : view === 'owners'
        ? {
            showOnOwners: true
          }
        : {};
    const query = QueryString.stringify(
      {
        locale: locale,
        sort: ['order:asc'],
        populate: {
          projects: {
            fields: ['id', 'name', 'slug', 'welcomeTitle', 'salesProgress', 'shouldRedirect', 'redirectLink'],
            sort: ['order:asc'],
            populate: {
              thumbnail: {
                fields: ['url', 'width', 'height']
              },
              thumbnailBackground: {
                fields: ['url', 'width', 'height']
              },
              projectStatus: {
                fields: ['name']
              },
              projectSaleStage: {
                fields: ['name']
              }
            },
            filters: {
              ...viewQuery
            }
          },
          icon: {
            fields: ['url', 'width', 'height']
          },
          iconActive: {
            fields: ['url', 'width', 'height']
          }
        }
      },
      {
        encodeValuesOnly: true
      }
    );

    let data: any = (await axiosGet(apiProjectCategories, query)) || [];

    return data;
  } catch (error) {
    return null;
  }
};