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

const ListToolbar = () => {
  const { table, reload } = useDataGrid();
  const { handleAddDialog, handleSearchDialog } = useManageMunicipiosContext();
  const [searchName, setSearchName] = useState('');
  const [isLoading, setIsLoading] = useState(false);

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

  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">
              <KeenIcon icon="magnifier" />
              <input
                type="text"
                placeholder="Search Municipios"
                value={searchName}
                onChange={(event) => setSearchName(event.target.value)}
              />
            </label>
            <DefaultTooltip title={'Filter'} placement={'top'}>
              <Button
                variant="outline"
                className="h-7.5 disabled:bg-gray-400"
                // disabled={isLoading}
                onClick={handleFilterData}
              >
                {/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
                <KeenIcon icon="filter" />
              </Button>
            </DefaultTooltip>
            {/* <Button
              variant="outline"
              className="h-7.5 text-[0.8rem]"
              onClick={() => handleSearchDialog(true)}
            >
              Search Postu Administrativo
            </Button> */}
          </div>
          <div className="flex gap-3 items-center">
            <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>
    </div>
  );
};

export default ListToolbar;