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

import React, { useEffect, useState } from 'react';
import dynamic from 'next/dynamic';
import Link from 'next/link';
import { useQuery } from 'react-query';

import { IProductDetail } from '~/types/product';
import { IProductVariantSLA } from '~/types/productVariant';
import { createSlug } from '~/libs/slug';
import { getVariantSLA } from '~/services/productVariant';
import { formatToShortText } from '~/libs/formatNumber';
import currencyFormat from '@/core/utils/currencyFormat';
import { Icon, InputGroup, InputRightElement } from '@chakra-ui/react';
import {
  CheckIcon,
  ChevronDownIcon,
  FingerPrintIcon,
} from '@heroicons/react/24/outline';
import { useProductDetail } from '../stores/useProductDetail';
import Image from 'next/image';
import useDevice from '@/core/hooks/useDevice';
import { optimizedAppearDataAttribute } from 'framer-motion';

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 variantOptions = product?.variants;

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

  const getsla = async () => {
    const querySLA = await getVariantSLA(selectedVariant?.id);
    setSla(querySLA);
  };

  useEffect(() => {
    getsla();
  }, [selectedVariant]);

  const handleOnChange = (vals: any) => {
    let code = vals.split(' ')[0];
    let variant = variantOptions.find((item) => item.code === code);
    setSelectedVariant(variant);
    setInputValue(variant?.code + ' - ' + variant?.attributes[0]);
  };

  const handleOnKeyUp = (e: any) => {
    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?.variant_total} Variants
          </span>{' '}
        </label>
        <AutoComplete
          openOnFocus
          className='form-input'
          onChange={(vals) => handleOnChange(vals)}
        >
          <InputGroup>
            <AutoCompleteInput
              value={inputValue as string}
              onChange={(e) => handleOnKeyUp(e)}
            />
            <InputRightElement>
              <ChevronDownIcon className='h-6 w-6 text-gray-500' />
            </InputRightElement>
          </InputGroup>

          <AutoCompleteList>
            {variantOptions.map((option, cid) => (
              <AutoCompleteItem
                key={`option-${cid}`}
                value={option.code + ' - ' + option.attributes[0]}
                textTransform='capitalize'
              >
                <div className='flex gap-x-2 justify-between w-full'>
                  <div className='text-small'>
                    {option.code + ' - ' + option.attributes[0]}
                  </div>
                  <div className='grid grid-cols-3 items-end justify-items-end'>
                    {option?.price?.discount_percentage > 0 && (
                      <>
                        <div className='badge-solid-red text-xs'>
                          {Math.floor(option?.price?.discount_percentage)}%
                        </div>
                        <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
                          {currencyFormat(option?.price?.price)}
                        </div>
                      </>
                    )}

                    <div className='text-danger-500 font-semibold mb-2'>
                      {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()
              )}
            >
              <Image
                height={50}
                width={100}
                src={product.manufacture.logo}
                alt={product.manufacture.name}
                className='h-8 object-cover'
              />
            </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>
        <div className={style['value']}>{sla?.sla_date}</div>
      </div>
    </div>
  );
};

export default Information;
