import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { useTransactionContext } from '../hooks/useTransactionContext';
import { Button } from '@/components/ui/button';
import { useCallback, useState, useEffect } from 'react';
import { toast } from 'sonner';

const ListToolbar = () => {
  const { table, reload } = useDataGrid();

  // Set the initial state for trxDate
  const [trxDate, settrxDate] = useState({ from: '', to: '' });

  // Function to format date to YYYY-MM-DD
  const formatDate = (date: Date): string => {
    return date.toISOString().split('T')[0];
  };

  // useEffect to set the default date values
  useEffect(() => {
    const today = new Date();
    const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
    settrxDate({
      from: formatDate(firstDayOfMonth),
      to: formatDate(today),
    });
  }, []);

  const handleFilterData = useCallback(() => {
    try {
      table.getColumn('transaction_date')?.setFilterValue(trxDate);
    } catch (error) {
      toast.error('Error applying filter');
      console.error('Error applying filter:', error);
    }
  }, [trxDate, table]);

  useEffect(() => {
    if (trxDate.from && trxDate.to) {
      handleFilterData();
    }
  }, [trxDate]);

  return (
    <div className="card-header flex-wrap gap-2 border-b-0 px-5">
      <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
        <div className="flex justify-between w-full items-center">
          <div className="flex w-[50%] gap-3 items-center">
            <label className="input input-sm w-1/3">
              From
              <input
                type="date"
                placeholder="From"
                value={trxDate.from}
                onChange={(event) =>
                  settrxDate({ ...trxDate, from: event.target.value })
                }
                name="from"
              />
            </label>

            <label className="input input-sm w-1/3">
              To
              <input
                type="date"
                placeholder="To"
                value={trxDate.to}
                onChange={(event) =>
                  settrxDate({ ...trxDate, to: event.target.value })
                }
                name="to"
              />
            </label>
            <DefaultTooltip title={'Refresh'} placement={'top'}>
              <Button
                variant="outline"
                className="h-7.5"
                onClick={() => {
                  const today = new Date();
                  const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
                  settrxDate({
                    from: formatDate(firstDayOfMonth),
                    to: formatDate(today),
                  });
                  reload();
                }}
              >
                <KeenIcon icon="arrows-circle" />
              </Button>
            </DefaultTooltip>

          </div>
        </div>
      </div>
    </div>
  );
};

export default ListToolbar;