import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { useManageNotificationContext } from '../hooks/useManageNotificationContext';
import { Button } from '@/components/ui/button';
import { useCallback, useEffect, useState } from 'react';
import { toast } from 'sonner';
import { DateRangePicker } from '@/pages/dashboards/home/blocks';

const formatDate = (date: Date): string => date.toISOString().split('T')[0];

const ListToolBar = () => {
  const { table, reload } = useDataGrid();
  const { handleAddDialog } = useManageNotificationContext();
  const [dateRange, setDateRange] = useState({ from: '', to: '' });
  const [searchValue, setSearchValue] = useState<string>(
    (table.getColumn('content')?.getFilterValue() as string) ?? ''
  );

  useEffect(() => {
    const today = new Date();
    const formatted = formatDate(today);
    setDateRange({ from: formatted, to: formatted });
  }, []);

  useEffect(() => {
    const timer = setTimeout(() => {
      table.getColumn('content')?.setFilterValue(searchValue);
      table.setPageIndex(0);
    }, 200);
    return () => clearTimeout(timer);
  }, [searchValue, table]);

  useEffect(() => {
    const today = new Date();
    const formatted = formatDate(today);
    const initialDateRange = { from: formatted, to: formatted };

    setDateRange(initialDateRange);

    try {
      table.getColumn('created_at')?.setFilterValue(initialDateRange);
    } catch (error) {
      toast.error('Error applying initial date filter');
      console.error('Initial date filter error:', error);
    }
  }, []);

  const handleClearAllFilters = () => {
    const today = new Date();
    const resetDateRange = {
      from: formatDate(today),
      to: formatDate(today)
    };

    setSearchValue('');
    setDateRange(resetDateRange);

    table.getColumn('content')?.setFilterValue('');
    table.getColumn('created_at')?.setFilterValue(resetDateRange);

    setTimeout(() => {
      table.setPageIndex(0);
      reload();
    }, 0);
  };

  useEffect(() => {
    try {
      table.getColumn('created_at')?.setFilterValue(dateRange);
    } catch (error) {
      toast.error('Error applying date filter');
      console.error('Date filter error:', error);
    }
  }, [dateRange]);

  useEffect(() => {
    const checkNewDay = () => {
      const now = new Date();
      const formattedNow = formatDate(now);
      if (formattedNow !== dateRange.from || formattedNow !== dateRange.to) {
        setDateRange({ from: formattedNow, to: formattedNow });
      }
    };

    const interval = setInterval(checkNewDay, 60 * 1000);
    return () => clearInterval(interval);
  }, [dateRange]);

  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 flex-wrap gap-3">
          <label className="input input-sm w-[160px]">
            From
            <input
              type="date"
              placeholder="From"
              value={dateRange.from}
              onChange={(event) => setDateRange({ ...dateRange, from: event.target.value })}
              name="from"
            />
          </label>

          <label className="input input-sm w-[160px]">
            To
            <input
              type="date"
              placeholder="To"
              value={dateRange.to}
              onChange={(event) => setDateRange({ ...dateRange, to: event.target.value })}
              name="to"
            />
          </label>

          <DefaultTooltip title={'Reset Filter'} placement={'top'}>
            <Button
              variant="outline"
              className="h-8 disabled:bg-gray-400"
              onClick={handleClearAllFilters}
            >
              <KeenIcon icon="arrow-circle-left" />
            </Button>
          </DefaultTooltip>

          <label className="input input-sm w-1/3">
            <KeenIcon icon="magnifier" />
            <input
              type="text"
              placeholder="Search Notification"
              value={searchValue}
              onChange={(e) => setSearchValue(e.target.value)}
            />
          </label>
          {/* <DefaultTooltip title={'Search'} placement={'top'}>
              <Button
                variant="outline"
                className="h-7.5 disabled:bg-gray-400"
                onClick={handleSearch}
              >
                <KeenIcon icon="magnifier" />
              </Button>
            </DefaultTooltip> */}
        </div>

        <div className="flex gap-3 ml-auto">
          <Button
            variant="outline"
            className="h-7.5 text-[0.8rem]"
            onClick={() => handleAddDialog(true)}
          >
            Add Data
          </Button>
          <DefaultTooltip title={'Refresh'} placement={'top'}>
            <Button variant="outline" className="h-7.5" onClick={() => reload()}>
              <KeenIcon icon="arrows-circle" />
            </Button>
          </DefaultTooltip>
        </div>
      </div>
    </div>
  );
};

export { ListToolBar };