import { Button } from '@/components/ui/button';
import { UserPlus } from 'lucide-react';
import { KeenIcon, useDataGrid } from '@/components';
import { DefaultTooltip } from '@/components';
import { useState } from 'react';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@/components/ui/select';

interface ListToolbarProps {
  createMember: () => void;
  onReload: () => void;
  isReloading: boolean;
  groups: any;
}

const ListToolbar = ({ createMember, onReload, isReloading, groups }: ListToolbarProps) => {

  const [groupFilter, setGroupFilter] = useState('');
  const [usernameFilter, setUsernameFilter] = useState('');
  const {table}=useDataGrid();
  const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setUsernameFilter(e.target.value);
    table.getColumn('username')?.setFilterValue(e.target.value);
  };

  const handleGroupChange = (e: any) => {
    let value = e.target.value;
    if (value === '__all__') value = '';
    setGroupFilter(value);
    table.getColumn('group_name')?.setFilterValue(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 w-40"
            />
            <Select value={groupFilter} onValueChange={(e) => (handleGroupChange({ target : { value: e }}))}>
              <SelectTrigger className="input input-sm w-40 text-gray-500">
                <SelectValue placeholder="Select Group" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value={"__all__"}>All Group</SelectItem>
                {groups.map((el: any, idx: any) => (
                  <SelectItem key={idx} value={el.name}>
                    {el.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </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={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 default ListToolbar;