import QueryString from 'qs';
import { axiosGet } from './actions';
import { apiCities, apiUrl } from './constants';
import { mapWithUrl } from './projects';

export const getCities = async (locale = 'es') => {
  try {
    const query = QueryString.stringify(
      {
        locale: locale,
        sort: ['name '],
        fields: ['name', 'slug', 'contactEmail', 'phoneNumber', 'linkGoogleMaps', 'address'],
        pagination: {
          limit: -1
        },
        populate: {
          state: {
            fields: ['name', 'slug']
          },
          thumbnail: {
            fields: ['url', 'width', 'height']
          },
          mapImage: {
            fields: ['url', 'width', 'height']
          },
          horizontalThumbnail: {
            fields: ['url', 'width', 'height']
          },
          projects: {
            fields: ['id', 'name', 'slug'],
            sort: ['name:asc']
          },
          localizations: {
            populate: {
              state: {
                fields: ['name', 'slug']
              }
            }
          }
        }
      },
      {
        encodeValuesOnly: true
      }
    );
    let data = await axiosGet(apiCities, query);

    data =
      data && Array?.isArray(data) && data?.length
        ? data?.map((element) => {
            return {
              ...element,
              state: element?.state
                ? element?.state
                : element?.localizations?.[0]?.state
                ? element.localizations[0].state
                : null,
              thumbnail: element?.thumbnail ? { ...element?.thumbnail, url: apiUrl + element?.thumbnail?.url } : null,
              mapImage: element?.mapImage ? { ...element?.mapImage, url: apiUrl + element?.mapImage?.url } : null,
              horizontalThumbnail: element?.horizontalThumbnail
                ? { ...element?.horizontalThumbnail, url: apiUrl + element?.horizontalThumbnail?.url }
                : null
            };
          })
        : null;

    return data || [];
  } catch (error) {
    console.log('error ', error);
    return [];
  }
};

export const getCity = async (props: any) => {
  const { locale = 'es', slug = '' } = props;
  try {
    const query = QueryString.stringify(
      {
        locale: locale,
        filters: {
          slug: {
            $eq: slug
          }
        },
        sort: ['name '],
        // fields: ['name',"slug","contactEmail","phoneNumber","linkGoogleMaps"],
        pagination: {
          limit: -1
        },
        populate: {
          state: {
            fields: ['name', 'slug']
          },
          thumbnail: {
            fields: ['url', 'width', 'height']
          },
          mapImage: {
            fields: ['url', 'width', 'height']
          },
          horizontalThumbnail: {
            fields: ['url', 'width', 'height']
          },
          sliderImages: {
            fields: ['url', 'width', 'height']
          },
          welcomeMap: {
            fields: ['url', 'width', 'height']
          },
          welcomeImage: {
            fields: ['url', 'width', 'height']
          },
          localizations: {
            fields: ['slug']
          }
        }
      },
      {
        encodeValuesOnly: true
      }
    );
    let data: any = await axiosGet(apiCities, query);
    data = data && Array?.isArray(data) && data?.length ? data[0] : null;

    if (data) {
      data = {
        ...data,
        thumbnail: data?.thumbnail ? { ...data?.thumbnail, url: apiUrl + data?.thumbnail?.url } : null,
        mapImage: data?.mapImage ? { ...data?.mapImage, url: apiUrl + data?.mapImage?.url } : null,
        welcomeMap: data?.welcomeMap ? { ...data?.welcomeMap, src: apiUrl + data?.welcomeMap?.url } : null,
        welcomeImage: data?.welcomeImage ? { ...data?.welcomeImage, url: apiUrl + data?.welcomeImage?.url } : null,
        horizontalThumbnail: data?.horizontalThumbnail
          ? { ...data?.horizontalThumbnail, url: apiUrl + data?.horizontalThumbnail?.url }
          : null,
        sliderImages:
          data?.sliderImages && Array?.isArray(data?.sliderImages) && data?.sliderImages?.length
            ? await data?.sliderImages?.map((item: any) => {
                return {
                  image: {
                    ...item,
                    url: apiUrl + item?.url
                  }
                };
              })
            : []
      };
    }
    return data;
  } catch (error) {
    console.log('error ', error);
    return [];
  }
};