import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { Button } from '@/components/ui/button';
import React, { useState } from 'react';

interface ListToolBarProps {
  createGroup: () => void;
  onReload: () => void;
  isReloading: boolean;
}

const ListToolBar = ({ createGroup, onReload, isReloading }: ListToolBarProps) => {
  const { table } = useDataGrid();
  const [usernameFilter, setUsernameFilter] = useState('');
  const [msisdn, setMsisdn] = useState('');
  const [fullname, setFullname] = useState('');
  const [merchantName, setMerchantName] = useState('');

  const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setUsernameFilter(e.target.value);
    table.getColumn('username')?.setFilterValue(e.target.value);
  };

  const filtermsisdn = (e: React.ChangeEvent<HTMLInputElement>) => {
    setMsisdn(e.target.value);
    table.getColumn('msisdn')?.setFilterValue(e.target.value);
  };

  const filterfullname = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFullname(e.target.value);
    table.getColumn('fullname')?.setFilterValue(e.target.value);
  };

  const filtermerchantname = (e: React.ChangeEvent<HTMLInputElement>) => {
    setMerchantName(e.target.value);
    table.getColumn('agent_name')?.setFilterValue(e.target.value);
  };

  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 phone" value={msisdn} onChange={filtermsisdn}/>
            </label>
            <label className="input input-sm w-1/3">
              <KeenIcon icon="magnifier" />
              <input type="text" placeholder="Search fullname" value={fullname} onChange={filterfullname}/>
            </label>
            <label className="input input-sm w-1/3">
              <KeenIcon icon="magnifier" />
              <input type="text" placeholder="Search username" value={usernameFilter} onChange={handleUsernameChange}/>
            </label>
            <label className="input input-sm w-1/3">
              <KeenIcon icon="magnifier" />
              <input type="text" placeholder="Search merchant name" value={merchantName} onChange={filtermerchantname}/>
            </label>
          </div>
          <div className="flex gap-3 items-center">
            {/* <Button variant="outline" className="h-7.5 text-[0.8rem]" onClick={createGroup}>
              Add Data
            </Button> */}
            <DefaultTooltip title={isReloading ? 'Refreshing...' : 'Refresh'} placement={'top'}>
              <Button variant="outline" className="h-7.5" onClick={onReload} disabled={isReloading}>
                {isReloading ? (
                  <div className="animate-spin">
                    <KeenIcon icon="arrows-circle" />
                  </div>
                ) : (
                  <KeenIcon icon="arrows-circle" />
                )}
              </Button>
            </DefaultTooltip>
          </div>
        </div>
      </div>
    </div>
  );
};

export { ListToolBar };
