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 } 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 { 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, sla } =
    useProductDetail();

  const [inputValue, setInputValue] = useState<string>('');
  const [disableFilter, setDisableFilter] = useState<boolean>(false);
  const inputRef = useRef<HTMLInputElement>(null);

  // source of truth
  const variantOptions = product.variants;

  const variantId = selectedVariant?.id;
  const { slaVariant, isLoading } = useVariant({ variantId });

  /* ======================
   * Sync input text
   * ====================== */
  useEffect(() => {
    if (!selectedVariant) return;

    setInputValue(
      selectedVariant.code +
        (selectedVariant.attributes?.[0]
          ? ` - ${selectedVariant.attributes[0]}`
          : '')
    );
  }, [selectedVariant]);

  /* ======================
   * Sync SLA
   * ====================== */
  useEffect(() => {
    if (isLoading) {
      setSla(null);
      return;
    }
    if (slaVariant) {
      setSla(slaVariant);
    }
  }, [slaVariant, isLoading, setSla]);

  /* ======================
   * Handlers
   * ====================== */
  const handleOnChange = (value: string) => {
    setDisableFilter(true);

    const variant = variantOptions.find((item) => String(item.id) === value);

    if (!variant) return;

    setSelectedVariant(variant);
  };

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

  return (
    <div className={style['wrapper']}>
      {/* ===== Variant Selector ===== */}
      <div className='relative 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={handleOnChange}
        >
          <InputGroup>
            <AutoCompleteInput
              ref={inputRef}
              value={inputValue}
              onChange={handleOnKeyUp}
              onFocus={() => setDisableFilter(true)}
            />
            <InputRightElement className='mr-4'>
              <ChevronDownIcon
                className='h-6 w-6 text-gray-500 cursor-pointer'
                onClick={() => inputRef.current?.focus()}
              />
            </InputRightElement>
          </InputGroup>

          <AutoCompleteList>
            {variantOptions.map((option) => (
              <AutoCompleteItem
                key={option.id}
                value={String(option.id)}
                _selected={
                  option.id === selectedVariant?.id
                    ? { bg: 'gray.300' }
                    : undefined
                }
              >
                <div 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'
                        : ''
                    }
                  >
                    {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>

      {/* ===== Info Rows ===== */}
      <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>
        ) : (
          <div className={style['value']}>{sla?.sla_date}</div>
        )}
      </div>
    </div>
  );
};

export default Information;