import QueryString from 'qs';
import { axiosGet } from './actions';
import { apiGalleries, apiUrl } from './constants';

const getFilteredCategoriesByLocaleAndType = (data: any, locale: any, type: string) => {
  return (data.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.galleryCategories ?? [])
    ?.filter((category: any) => 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 getGallery = async (props: any) => {
  const { locale = 'es', viewSlug = '', projectSlug = '' } = props;
  const viewQuery = viewSlug
    ? {
        view: {
          slug: {
            $eq: viewSlug
          }
        }
      }
    : {};
  const projectQuery = projectSlug
    ? {
        project: {
          slug: {
            $eq: projectSlug
          }
        }
      }
    : {};
  try {
    const query = QueryString.stringify(
      {
        populate: {
          galleryCategories: {
            fields: ['name', 'slug', 'order', 'locale'],
            sort: ['order:asc'],
            populate: {
              images: {
                fields: ['url', 'width', 'height']
              },
              localizations: {
                populate: {
                  state: {
                    fields: ['name', 'slug']
                  }
                }
              },
              view: { fields: ['id', 'slug'] }
            }
          }
        },
        filters: {
          ...viewQuery,
          ...projectQuery
        },
        pagination: {
          limit: 1
        }
      },
      {
        encodeValuesOnly: true
      }
    );
    let data: any = (await axiosGet(apiGalleries, query)) || [];

    if (data && data[0]) {
      return {
        categories: getFilteredCategoriesByLocaleAndType(data[0], locale, 'gallery'),
        images: getFilteredImagesByLocaleAndType(data[0], locale, 'gallery')
      };
    }

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