import NextImage from 'next/image';
import { useRouter } from 'next/router';
import { useEffect, useMemo, useState } from 'react';

import { HStack, Image, Tag, TagCloseButton, TagLabel } from '@chakra-ui/react';
import axios from 'axios';
import _ from 'lodash';
import { toQuery } from 'lodash-contrib';

import odooApi from '@/core/api/odooApi';
import searchSpellApi from '@/core/api/searchSpellApi';
import Link from '@/core/components/elements/Link/Link';
import Pagination from '@/core/components/elements/Pagination/Pagination';
import DesktopView from '@/core/components/views/DesktopView';
import MobileView from '@/core/components/views/MobileView';
import useActive from '@/core/hooks/useActive';
import { formatCurrency } from '@/core/utils/formatValue';
import { createSlug } from '@/core/utils/slug';
import whatsappUrl from '@/core/utils/whatsappUrl';

import useProductSearch from '../hooks/useProductSearch';
import ProductCard from './ProductCard';
import ProductFilter from './ProductFilter';
import ProductFilterDesktop from './ProductFilterDesktop';
import ProductSearchSkeleton from './Skeleton/ProductSearchSkeleton';

import SideBanner from '~/modules/side-banner';
import FooterBanner from '~/modules/footer-banner';
import CategorySection from './CategorySection';
import LobSectionCategory from './LobSectionCategory';
import { getIdFromSlug } from '@/core/utils/slug'
import { data } from 'autoprefixer';

const ProductSearch = ({
  query,
  prefixUrl,
  defaultBrand = null,
  brand = null,
}) => {
  const router = useRouter();
  const { page = 1 } = query;
  const [q, setQ] = useState(query?.q || '*');
  const [search, setSearch] = useState(query?.q || '*');
  const [limit, setLimit] = useState(router.query?.limit || 30);
  const [orderBy, setOrderBy] = useState(router.query?.orderBy || 'popular');
  const [finalQuery, setFinalQuery] = useState({});
  const [queryFinal, setQueryFinal] = useState({});
  const [dataCategoriesProduct, setDataCategoriesProduct] = useState([])
  const [dataCategoriesLob, setDataCategoriesLob] = useState([])
  const categoryId = getIdFromSlug(prefixUrl)
  const [data, setData] = useState([])
  const [dataLob, setDataLob] = useState([]);
  if (defaultBrand) query.brand = defaultBrand.toLowerCase();
  const dataIdCategories = []
  useEffect(() => {
    if(prefixUrl.includes('category')){
      const loadProduct = async () => {
        const getCategoriesId = await odooApi('GET', `/api/v1/category/numFound?parent_id=${categoryId}`);
        if (getCategoriesId) {
          setDataCategoriesProduct(getCategoriesId);
        }
      };
      loadProduct();
    }else if(prefixUrl.includes('lob')){
      const loadProduct = async () => {
        const lobData = await odooApi('GET', `/api/v1/lob_homepage/${categoryId}/category_id`);
         
        if (lobData) {
          setDataLob(lobData);
        }
      };
      loadProduct();
      
    }
  }, [categoryId]);
  
  const collectIds = (category) => {
    const ids = [];
    function recurse(cat) {
      if (cat && cat.id) {
        ids.push(cat.id);
      }
      if (Array.isArray(cat.children)) {
        cat.children.forEach(recurse);
      }
    }
    recurse(category);
    return ids;
  };
  
  useEffect(() => {
    if(prefixUrl.includes('category')){
      const ids = collectIds(dataCategoriesProduct);
      const newQuery = {
        fq: `category_id_ids:(${ids.join(' OR ')})`,
        page : router.query.page? router.query.page : 1,
        brand : router.query.brand? router.query.brand : '',
        category : router.query.category? router.query.category : '',
        priceFrom : router.query.priceFrom? router.query.priceFrom : '',
        priceTo : router.query.priceTo? router.query.priceTo : '',
        limit : router.query.limit? router.query.limit : '',
        orderBy : router.query.orderBy? router.query.orderBy : ''
      };
      setFinalQuery(newQuery);
    } else if (prefixUrl.includes('lob')){
      
      const fetchCategoryData = async () => {
        if (dataLob[0]?.categoryIds) {
          
          for (const cate of dataLob[0].categoryIds) {
           
            dataIdCategories.push(cate.childId)
          }
          
        
          const mergedArray = dataIdCategories.flat();
         
          const newQuery = {
            fq: `category_id_ids:(${mergedArray.join(' OR ')})`,
            category : router.query.category? router.query.category : '',
            page : router.query.page? router.query.page : 1,
            brand : router.query.brand? router.query.brand : '',
            priceFrom : router.query.priceFrom? router.query.priceFrom : '',
            priceTo : router.query.priceTo? router.query.priceTo : '',
            limit : router.query.limit? router.query.limit : '',
            orderBy : router.query.orderBy? router.query.orderBy : ''
          };
       
          setFinalQuery(newQuery);
         
        }
      };
      fetchCategoryData();
    }
  }, [dataCategoriesProduct, dataLob]);

  useEffect(() => {
    if (prefixUrl.includes('category') || prefixUrl.includes('lob')) {
      setQueryFinal({ ...finalQuery, q, limit, orderBy });
    } else {
      setQueryFinal({ ...query, q, limit, orderBy });
    }
  }, [prefixUrl,dataCategoriesProduct, query, finalQuery]);

  const { productSearch } = useProductSearch({
    query: queryFinal,
    operation: 'AND',
  });
  const [products, setProducts] = useState(null);
  const [spellings, setSpellings] = useState(null);
  const [bannerPromotionHeader, setBannerPromotionHeader] = useState(null);
  const [bannerPromotionFooter, setBannerPromotionFooter] = useState(null);
  const [isBrand, setIsBrand] = useState(null);
  const popup = useActive();
  const numRows = [30, 50, 80, 100];
  const [brandValues, setBrand] = useState(
    !router.pathname.includes('brands')
      ? router.query.brand
        ? router.query.brand.split(',')
        : []
      : []
  );
  const [categoryValues, setCategory] = useState(
    router.query?.category?.split(',') || router.query?.category?.split(',')
  );
  
  const [priceFrom, setPriceFrom] = useState(router.query?.priceFrom || null);
  const [priceTo, setPriceTo] = useState(router.query?.priceTo || null);

  const pageCount = Math.ceil(productSearch.data?.response.numFound / limit);
  const productStart = productSearch.data?.responseHeader.params.start;
  const productRows = limit;
  const productFound = productSearch.data?.response.numFound;
  const [dataCategories, setDataCategories] = useState([])
  
  useEffect(() => {
    if (productFound == 0 && query.q && !spellings) {
      searchSpellApi({ query: query.q }).then((response) => {
        const oddIndexSuggestions = response.data.spellcheck.suggestions.filter(
          (_, index) => index % 2 === 1
        );

        const oddIndexCollations = response.data.spellcheck.collations.filter(
          (_, index) => index % 2 === 1
        );

        const dataSpellings = oddIndexSuggestions.reduce((acc, curr) => {
          oddIndexCollations.forEach((collation) => {
            acc.push(collation.collationQuery);
          });
          curr.suggestion.forEach((s) => {
            if (!acc.includes(s.word)) acc.push(s.word);
          });
          return acc;
        }, []);

        if (dataSpellings.length > 0) {
          setQ(dataSpellings[0]);
        }

        setSpellings(dataSpellings);
      });
    }
  }, [productFound, query, spellings]);
  let id = []
  useEffect(() => {
    const checkIfBrand = async () => {
      const brand = await axios(
        `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/brands?params=search&q=${search}`
      );

      if (brand.data.length > 0) {
        setIsBrand(brand?.data[0]);
      } else {
        setIsBrand(null);
      }
    };
    if (router.pathname.includes('search') && q !== '*') {
      checkIfBrand();
    }
  }, [q]);
 
  useEffect(() => {
    if(prefixUrl.includes('category')){
      const loadCategories = async () => {
        const getCategories = await odooApi('GET', `/api/v1/category/child?parent_id=${categoryId}`)
       if(getCategories){
        setDataCategories(getCategories)
       }
      }
      loadCategories()
    }
  }, [])




  const brands = [];
  for (
    let i = 0;
    i < productSearch.data?.facetCounts?.facetFields?.manufactureNameS.length;
    i += 2
  ) {
    const brand =
      productSearch.data?.facetCounts?.facetFields?.manufactureNameS[i];
    const qty =
      productSearch.data?.facetCounts?.facetFields?.manufactureNameS[i + 1];
    if (qty > 0) {
      brands.push({ brand, qty });
    }
  }

  const categories = [];
  for (
    let i = 0;
    i < productSearch.data?.facetCounts?.facetFields?.categoryName.length;
    i += 2
  ) {
    const name = productSearch.data?.facetCounts?.facetFields?.categoryName[i];
    const qty =
      productSearch.data?.facetCounts?.facetFields?.categoryName[i + 1];
    if (qty > 0) {
      categories.push({ name, qty });
    }
  }

  const orderOptions = [
    { value: 'price-asc', label: 'Harga Terendah' },
    { value: 'price-desc', label: 'Harga Tertinggi' },
    { value: 'popular', label: 'Populer' },
    { value: 'stock', label: 'Ready Stock' },
  ];

  const handleOrderBy = (e) => {
    let params = {
      ...router.query,
      orderBy: e.target.value,
    };
    params = _.pickBy(params, _.identity);
    params = toQuery(params);
    router.push(`${prefixUrl}?${params}`);
  };

  const handleLimit = (e) => {
    let params = {
      ...router.query,
      limit: e.target.value,
    };
    params = _.pickBy(params, _.identity);
    params = toQuery(params);
    router.push(`${prefixUrl}?${params}`);
  };
  const getBanner = async () => {
    if (router.pathname.includes('search')) {
      const getBannerHeader = await odooApi(
        'GET',
        '/api/v1/banner?type=promotion-header'
      );
      const getBannerFooter = await odooApi(
        'GET',
        '/api/v1/banner?type=promotion-footer'
      );
      var randomIndex = Math.floor(Math.random() * getBannerHeader.length);
      var randomIndexFooter = Math.floor(
        Math.random() * getBannerFooter.length
      );
      setBannerPromotionHeader(getBannerHeader[randomIndex]);
      setBannerPromotionFooter(getBannerFooter[randomIndexFooter]);
    }
  };

  useEffect(() => {
    getBanner();
  }, []);

  useEffect(() => {
    setProducts(productSearch.data?.response?.products);
  }, [productSearch]);

  const SpellingComponent = useMemo(() => {
    return (
      <>
        {spellings?.length > 0 ? (
          <>Mungkin yang anda cari </>
        ) : (
          <>Produk yang cari anda tidak ada</>
        )}
        {spellings?.map((spelling, i) => (
          <Link href={`/shop/search?q=${spelling}`} key={i} className='inline'>
            {spelling}
            {i + 1 < spellings.length ? ', ' : ''}
          </Link>
        ))}
      </>
    );
  }, [spellings]);

  const handleDeleteFilter = async (source, value) => {
    let params = {
      q: router.query.q,
      orderBy: orderBy,
      brand: brandValues.join(','),
      category: categoryValues.join(','),
      priceFrom,
      priceTo,
    };

    let brands = brandValues;
    let catagories = categoryValues;
    switch (source) {
      case 'brands':
        brands = brandValues.filter((item) => item !== value);
        params.brand = brands.join(',');
        await setBrand(brands);
        break;
      case 'category':
        catagories = categoryValues.filter((item) => item !== value);
        params.category = catagories.join(',');
        await setCategory(catagories);
        break;
      case 'price':
        params.priceFrom = null;
        params.priceTo = null;
        break;
      case 'delete':
        params = {
          q: router.query.q,
          orderBy: orderBy,
        };
        break;
    }

    handleSubmitFilter(params);
  };
  const handleSubmitFilter = (params) => {
    params = _.pickBy(params, _.identity);
    params = toQuery(params);
    router.push(`${prefixUrl}?${params}`);
  };

  const isNotReadyStockPage = router.asPath !== '/shop/search?orderBy=stock';
  
  return (
    <>
      <MobileView>
        {productSearch.isLoading && <ProductSearchSkeleton />}
        <div className='p-4 pt-0'>
          {isNotReadyStockPage && isBrand && isBrand.logo && (
            <div className='mb-3'>
              <h1 className='mb-2 font-semibold text-h-sm'>
                Brand Pencarian {q}
              </h1>
              <Link
                href={createSlug('/shop/brands/', isBrand.name, isBrand.id)}
                className='inline'
              >
                <Image
                  src={isBrand?.logo}
                  alt=''
                  className='object-cover object-center h-[60px]'
                />
              </Link>
            </div>
          )}
          <h1 className='mb-2 font-semibold text-h-sm'>Produk</h1>
          <FilterChoicesComponent
            brandValues={brandValues}
            categoryValues={categoryValues}
            priceFrom={priceFrom}
            priceTo={priceTo}
            handleDeleteFilter={handleDeleteFilter}
          />

          <div className='mb-2 leading-6 text-gray_r-11'>
            {!spellings ? (
              <>
                Menampilkan&nbsp;
                {pageCount > 1 ? (
                  <>
                    {productStart + 1}-
                    {parseInt(productStart) + parseInt(productRows) >
                    productFound
                      ? productFound
                      : parseInt(productStart) + parseInt(productRows)}
                    &nbsp;dari&nbsp;
                  </>
                ) : (
                  ''
                )}
                {productFound}
                &nbsp;produk{' '}
                {query.q && (
                  <>
                    untuk pencarian{' '}
                    <span className='font-semibold'>{query.q}</span>
                  </>
                )}
              </>
            ) : (
              SpellingComponent
            )}
          </div>
          <LobSectionCategory categories={dataLob}/>
          <CategorySection categories={dataCategories}/>

          {productFound > 0 && (
            <div className='flex items-center gap-x-2 mb-5 justify-between'>
              <div>
                <button
                  className='btn-light py-2 px-5 h-[40px]'
                  onClick={popup.activate}
                >
                  Filter
                </button>
              </div>
              <div className=''>
                <select
                  name='limit'
                  className='form-input w-24'
                  value={router.query?.limit || ''}
                  onChange={(e) => handleLimit(e)}
                >
                  {numRows.map((option, index) => (
                    <option key={index} value={option}>
                      {' '}
                      {option}{' '}
                    </option>
                  ))}
                </select>
              </div>
            </div>
          )}

          <div className='grid grid-cols-2 gap-3'>
            {products &&
              products.map((product) => (
                <ProductCard product={product} key={product.id} />
              ))}
          </div>

          <Pagination
            pageCount={pageCount}
            currentPage={parseInt(page)}
            // url={`${prefixUrl}?${toQuery(_.omit(query, ['page']))}`}
            url={prefixUrl.includes('category') || prefixUrl.includes('lob')? `${prefixUrl}?${toQuery(_.omit(finalQuery, ['page']))}` : `${prefixUrl}?${toQuery(_.omit(query, ['page']))}`}
            className='mt-6 mb-2'
          />

          <ProductFilter
            active={popup.active}
            close={popup.deactivate}
            brands={brands || []}
            categories={categories || []}
            prefixUrl={prefixUrl}
            defaultBrand={defaultBrand}
          />
        </div>
      </MobileView>

      <DesktopView>
        <div className='container mx-auto flex mb-3'>
          <div className='w-3/12'>
            {brand && (
              <div className='p-4'>
                <div className='text-caption-1 text-gray_r-11 mb-2'>
                  Produk dari brand:
                </div>
                {brand?.data?.logo && (
                  <Image
                    src={brand?.data?.logo}
                    alt={brand?.data?.name}
                    className='w-32 p-2 border borde-gray_r-6 rounded'
                  />
                )}
                {!brand?.data?.logo && (
                  <div className='bg-danger-500 text-white text-center text-body-1 py-2 px-4 rounded w-fit'>
                    {brand?.data?.name}
                  </div>
                )}
              </div>
            )}

            <ProductFilterDesktop
              brands={brands || []}
              categories={categories || []}
              prefixUrl={prefixUrl}
              defaultBrand={defaultBrand}
            />

            <div className='h-6' />

            <SideBanner />
          </div>

          <div className='w-9/12 pl-6'>
            <LobSectionCategory categories={dataLob}/>
            <CategorySection categories={dataCategories}/>
            {bannerPromotionHeader && bannerPromotionHeader?.image && (
              <div className='mb-3'>
                <Image
                  src={bannerPromotionHeader?.image}
                  alt=''
                  className='object-cover object-center h-full mx-auto'
                />
              </div>
            )}

            {isNotReadyStockPage && isBrand && isBrand.logo && (
              <div className='mb-3'>
                <h1 className='text-2xl mb-2 font-semibold'>
                  Brand Pencarian {q}
                </h1>
                <Link
                  href={createSlug('/shop/brands/', isBrand.name, isBrand.id)}
                  className='inline'
                >
                  <Image
                    src={isBrand?.logo}
                    alt=''
                    className='object-cover object-center h-24'
                  />
                </Link>
              </div>
            )}

            <h1 className='text-2xl mb-2 font-semibold'>Hasil Pencarian</h1>
            <FilterChoicesComponent
              brandValues={brandValues}
              categoryValues={categoryValues}
              priceFrom={priceFrom}
              priceTo={priceTo}
              handleDeleteFilter={handleDeleteFilter}
            />
            <div className='flex justify-between items-center mb-5'>
              <div className='leading-6 text-gray_r-11'>
                {!spellings ? (
                  <>
                    Menampilkan&nbsp;
                    {pageCount > 1 ? (
                      <>
                        {productStart + 1}-
                        {parseInt(productStart) + parseInt(productRows) >
                        productFound
                          ? productFound
                          : parseInt(productStart) + parseInt(productRows)}
                        &nbsp;dari&nbsp;
                      </>
                    ) : (
                      ''
                    )}
                    {productFound}
                    &nbsp;produk{' '}
                    {query.q && (
                      <>
                        untuk pencarian{' '}
                        <span className='font-semibold'>{query.q}</span>
                      </>
                    )}
                  </>
                ) : (
                  SpellingComponent
                )}
              </div>
              <div className='justify-end flex '>
                <div className='ml-3'>
                  <select
                    name='urutan'
                    className='form-input'
                    value={orderBy}
                    onChange={(e) => handleOrderBy(e)}
                  >
                    {orderOptions.map((option, index) => (
                      <option key={index} value={option.value}>
                        {' '}
                        {option.label}{' '}
                      </option>
                    ))}
                  </select>
                </div>
                <div className='ml-3'>
                  <select
                    name='limit'
                    className='form-input'
                    value={router.query?.limit || ''}
                    onChange={(e) => handleLimit(e)}
                  >
                    {numRows.map((option, index) => (
                      <option key={index} value={option}>
                        {' '}
                        {option}{' '}
                      </option>
                    ))}
                  </select>
                </div>
              </div>
            </div>
            {productSearch.isLoading && <ProductSearchSkeleton />}
            <div className='grid grid-cols-5 gap-x-3 gap-y-6'>
              {products &&
                products.map((product) => (
                  <ProductCard product={product} key={product.id} />
                ))}
            </div>
            <div className='flex justify-between items-center mt-6 mb-2'>
              <div className='pt-2 pb-6 flex items-center gap-x-3'>
                <NextImage
                  src='/images/logo-question.png'
                  alt='Logo Question Indoteknik'
                  width={60}
                  height={60}
                />
                <div className='text-gray_r-12/90'>
                  <span>
                    Barang yang anda cari tidak ada?{' '}
                    <a
                      href={
                        query?.q
                          ? whatsappUrl('productSearch', {
                              name: query.q,
                            })
                          : whatsappUrl()
                      }
                      className='text-danger-500'
                    >
                      Hubungi Kami
                    </a>
                  </span>
                </div>
              </div>

              <Pagination
                pageCount={pageCount}
                currentPage={parseInt(page)}
                // url={`${prefixUrl}?${toQuery(_.omit(query, ['page']))}`}
                url={prefixUrl.includes('category') || prefixUrl.includes('lob')? `${prefixUrl}?${toQuery(_.omit(finalQuery, ['page']))}` : `${prefixUrl}?${toQuery(_.omit(query, ['page']))}`}
                className='!justify-end'
              />
            </div>
            {bannerPromotionFooter && bannerPromotionFooter?.image && (
              <div className='mb-3'>
                <Image
                  src={bannerPromotionFooter?.image}
                  alt=''
                  className='object-cover object-center h-full mx-auto'
                />
              </div>
            )}
            <FooterBanner />
          </div>
        </div>
      </DesktopView>
    </>
  );
};

export default ProductSearch;

const FilterChoicesComponent = ({
  brandValues,
  categoryValues,
  priceFrom,
  priceTo,
  handleDeleteFilter,
}) => (
  <div className='flex items-center'>
    <HStack spacing={2} className='flex-wrap'>
      {brandValues?.map((value, index) => (
        <Tag
          size='lg'
          key={index}
          borderRadius='lg'
          variant='outline'
          colorScheme='gray'
        >
          <TagLabel>{value}</TagLabel>
          <TagCloseButton onClick={() => handleDeleteFilter('brands', value)} />
        </Tag>
      ))}

      {categoryValues?.map((value, index) => (
        <Tag
          size='lg'
          key={index}
          borderRadius='lg'
          variant='outline'
          colorScheme='gray'
        >
          <TagLabel>{value}</TagLabel>
          <TagCloseButton
            onClick={() => handleDeleteFilter('category', value)}
          />
        </Tag>
      ))}
      {priceFrom && priceTo && (
        <Tag size='lg' borderRadius='lg' variant='outline' colorScheme='gray'>
          <TagLabel>
            {formatCurrency(priceFrom) + '-' + formatCurrency(priceTo)}
          </TagLabel>
          <TagCloseButton
            onClick={() => handleDeleteFilter('price', priceFrom)}
          />
        </Tag>
      )}
      {brandValues?.length > 0 ||
      categoryValues?.length > 0 ||
      priceFrom ||
      priceTo ? (
        <span>
          <button
            className='btn-transparent py-2 px-5 h-[40px] text-red-700'
            onClick={() => handleDeleteFilter('delete')}
          >
            Hapus Semua
          </button>
        </span>
      ) : (
        ''
      )}
    </HStack>
  </div>
);