import {
  AutoComplete,
  AutoCompleteInput,
  AutoCompleteItem,
  AutoCompleteList,
} from '@choc-ui/chakra-autocomplete';
import style from '../styles/information.module.css';

import dynamic from 'next/dynamic';
import Link from 'next/link';
import { useEffect, useRef, useState } from 'react';

import currencyFormat from '@/core/utils/currencyFormat';
import { InputGroup, InputRightElement, Spinner } from '@chakra-ui/react';
import { ChevronDownIcon } from '@heroicons/react/24/outline';
import Image from 'next/image';
import { formatToShortText } from '~/libs/formatNumber';
import { createSlug } from '~/libs/slug';
import { getVariantSLA } from '~/services/productVariant';
import { IProductDetail } from '~/types/product';
import { useProductDetail } from '../stores/useProductDetail';
import useVariant from '../hook/useVariant';

const Skeleton = dynamic(() =>
  import('@chakra-ui/react').then((mod) => mod.Skeleton)
);

type Props = {
  product: IProductDetail;
};

const Information = ({ product }: Props) => {
  const { selectedVariant, setSelectedVariant, setSla, setActive, sla } =
    useProductDetail();

  const [inputValue, setInputValue] = useState<string | null>(
    selectedVariant?.code + ' - ' + selectedVariant?.attributes[0]
  );
  const [disableFilter, setDisableFilter] = useState<boolean>(false);
  const inputRef = useRef<HTMLInputElement>(null);

  const [variantOptions, setVariantOptions] = useState<any[]>(
    product?.variants
  );
  const variantId = selectedVariant?.id;
  const { slaVariant, isLoading } = useVariant({ variantId });

  // let variantOptions = product?.variants;

  // const querySLA = useQuery<IProductVariantSLA>({
  //   queryKey: ['variant-sla', selectedVariant?.id],
  //   queryFn: () => getVariantSLA(selectedVariant?.id),
  //   enabled: !!selectedVariant?.id,
  // });
  // const sla = querySLA?.data;

  useEffect(() => {
    if (selectedVariant) {
      setInputValue(
        selectedVariant?.code +
          (selectedVariant?.attributes[0]
            ? ' - ' + selectedVariant?.attributes[0]
            : '')
      );
    }
  }, [selectedVariant]);

  useEffect(() => {
    if (isLoading){
      setSla(null);
    }
    if (slaVariant) {
      setSla(slaVariant);
    }
  }, [slaVariant, isLoading]);
  

  const handleOnChange = (vals: any) => {
    setDisableFilter(true);
    let code = vals.replace(/\s-\s.*$/, '').trim();
    let variant = variantOptions.find((item) => item.code === code);
    setSelectedVariant(variant);
    setInputValue(
      variant?.code +
        (variant?.attributes[0] ? ' - ' + variant?.attributes[0] : '')
    );
    if (variant) {
      const filteredOptions = product?.variants.filter(
        (item) => item !== variant
      );
      const newOptions = [variant, ...filteredOptions];
      setVariantOptions(newOptions);
    }
  };

  const handleOnKeyUp = (e: any) => {
    setDisableFilter(false);
    setInputValue(e.target.value);
  };

  return (
    <div className={style['wrapper']}>
      <div className='realtive mb-5'>
        <label className='form-label mb-2 text-lg text-red-600'>
          Pilih Variant * :{' '}
          <span className='text-gray_r-9 text-sm'>
            {product?.variants?.length} Variants
          </span>{' '}
        </label>
        <AutoComplete
          disableFilter={disableFilter}
          openOnFocus
          className='form-input'
          onChange={(vals) => handleOnChange(vals)}
        >
          <InputGroup>
            <AutoCompleteInput
              ref={inputRef}
              value={inputValue as string}
              onChange={(e) => handleOnKeyUp(e)}
              onFocus={() => setDisableFilter(true)}
            />
            <InputRightElement className='mr-4'>
              <ChevronDownIcon
                className='h-6 w-6 text-gray-500'
                onClick={() => inputRef?.current?.focus()}
              />
            </InputRightElement>
          </InputGroup>

          <AutoCompleteList>
            {variantOptions.map((option, cid) => (
              <AutoCompleteItem
                key={`option-${cid}`}
                value={
                  option.code +
                  (option?.attributes[0] ? ' - ' + option?.attributes[0] : '')
                }
                _selected={
                  option.id === selectedVariant?.id
                    ? {
                        bg: 'gray.300',
                      }
                    : undefined
                }
                textTransform='capitalize'
              >
                <div
                  key={cid}
                  className='flex gap-x-2 w-full justify-between px-3 items-center p-2'
                >
                  <div className='text-small'>
                    {option.code +
                      (option?.attributes[0]
                        ? ' - ' + option?.attributes[0]
                        : '')}
                  </div>
                  <div
                    className={
                      option?.price?.discount_percentage
                        ? 'flex gap-x-4 items-center justify-between'
                        : ''
                    }
                  >
                    {option?.price?.discount_percentage > 0 && (
                      <>
                        <div className='badge-solid-red text-xs'>
                          {Math.floor(option?.price?.discount_percentage)}%
                        </div>
                        <div className='min-w-16 sm:min-w-24 text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
                          {currencyFormat(option?.price?.price)}
                        </div>
                      </>
                    )}
                    <div className='min-w-20 sm:min-w-28 text-danger-500 font-semibold'>
                      {currencyFormat(option?.price?.price_discount)}
                    </div>
                  </div>
                </div>
              </AutoCompleteItem>
            ))}
          </AutoCompleteList>
        </AutoComplete>
      </div>

      <div className={style['row']}>
        <div className={style['label']}>Item Code</div>
        <div className={style['value']}>{selectedVariant?.code}</div>
      </div>
      <div className={style['row']}>
        <div className={style['label']}>Manufacture</div>
        <div className={style['value']}>
          {!!product.manufacture.name ? (
            <Link
              href={createSlug(
                '/shop/brands/',
                product.manufacture.name,
                product.manufacture.id.toString()
              )}
            >
              {product?.manufacture.logo ? (
                <Image
                  height={50}
                  width={100}
                  src={product.manufacture.logo}
                  alt={product.manufacture.name}
                  className='h-8 object-fit'
                />
              ) : (
                <p className='font-bold text-red-500'>
                  {product.manufacture.name}
                </p>
              )}
            </Link>
          ) : (
            '-'
          )}
        </div>
      </div>
      <div className={style['row']}>
        <div className={style['label']}>Berat Barang</div>
        <div className={style['value']}>
          {selectedVariant?.weight > 0 ? `${selectedVariant?.weight} Kg` : '-'}
        </div>
      </div>
      <div className={style['row']}>
        <div className={style['label']}>Terjual</div>
        <div className={style['value']}>
          {product.qty_sold > 0 ? formatToShortText(product.qty_sold) : '-'}
        </div>
      </div>
      <div className={style['row']}>
        <div className={style['label']}>Persiapan Barang</div>
        {isLoading && (
          <div className={style['value']}>
            <Skeleton height={5} width={100} />
          </div>
        )}
        {!isLoading && <div className={style['value']}>{sla?.sla_date}</div>}
      </div>
    </div>
  );
};

export default Information;