'use client';

import Button from '@/components/Button';
import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
import { OptionType } from '@/components/input/SelectInput';
import Modal from '@/components/Modal';
import { ProductWarehouseStock } from '@/types/api/inventory/product';
import { Icon } from '@iconify/react';
import { useFormik } from 'formik';
import { RefObject, useCallback } from 'react';

interface StockLogFilterModalProps {
  ref: RefObject<HTMLDialogElement | null>;
  productWarehouses: ProductWarehouseStock[];
  initialValues: {
    warehouse_ids: OptionType<number>[];
  };
  onSubmit: (values: { warehouse_ids: OptionType<number>[] }) => void;
  onReset: () => void;
}

const StockLogFilterModal = ({
  ref,
  productWarehouses,
  initialValues,
  onSubmit,
  onReset,
}: StockLogFilterModalProps) => {
  const closeModalHandler = () => {
    ref.current?.close();
  };

  const warehouseOptions: OptionType<number>[] = productWarehouses.map(
    (pw) => ({
      label: pw.warehouse_name,
      value: pw.warehouse_id,
    })
  );

  const formik = useFormik({
    initialValues,
    enableReinitialize: true,
    onSubmit: (values) => {
      onSubmit(values);
      closeModalHandler();
    },
  });

  const { resetForm } = formik;

  const formikResetHandler = useCallback(() => {
    resetForm({ values: { warehouse_ids: [] } });
    onReset();
    closeModalHandler();
  }, [resetForm, onReset]);

  return (
    <Modal ref={ref} className={{ modalBox: 'p-0 rounded-xl' }}>
      <form
        onSubmit={formik.handleSubmit}
        onReset={formikResetHandler}
        className='w-full flex flex-col'
      >
        <div className='p-4 flex items-center justify-between gap-2 border-b border-gray-300'>
          <div className='flex items-center gap-2 text-primary'>
            <Icon icon='heroicons:funnel' width={20} height={20} />
            <h3 className='text-sm font-medium'>Filter Stock Log</h3>
          </div>
          <Button
            type='button'
            variant='ghost'
            color='none'
            onClick={closeModalHandler}
            className='p-0 text-base-content/50 hover:text-base-content'
          >
            <Icon icon='heroicons:x-mark' width={20} height={20} />
          </Button>
        </div>

        <div className='p-4 flex flex-col gap-1.5'>
          <SelectInputCheckbox
            label='Gudang'
            isClearable
            placeholder='Pilih gudang'
            options={warehouseOptions}
            value={formik.values.warehouse_ids}
            onChange={(val) =>
              formik.setFieldValue('warehouse_ids', val as OptionType<number>[])
            }
            isMulti
          />
        </div>

        <div className='p-4 flex justify-between gap-4 border-t border-gray-300 bg-gray-100'>
          <Button
            type='reset'
            variant='ghost'
            color='none'
            className='p-3 rounded-lg text-base-content/65'
          >
            Reset Filter
          </Button>
          <Button
            type='submit'
            className='p-3 rounded-lg w-fit sm:w-full max-w-40 text-base-100 text-sm'
          >
            Apply Filter
          </Button>
        </div>
      </form>
    </Modal>
  );
};

export default StockLogFilterModal;
