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

const ListToolbar = ({ createMember }: { createMember: () => void }) => {
  const { table, reload } = useDataGrid();
  const [   usernameFilter, setUsernameFilter] = useState('');
  const [emailFilter, setEmailFilter] = useState('');

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

  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setEmailFilter(e.target.value);
    table.getColumn('email')?.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 gap-3 items-center">
            <input
              type="text"
              placeholder="Search Username"
              value={usernameFilter}
              onChange={handleUsernameChange}
              className="input input-sm w-40"
            />
          </div>
          <div className="flex gap-3 items-center">
            <Button
              variant="outline"
              className="h-7.5 text-[0.8rem]"
              onClick={createMember}
            >
              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;
