revenue-fe/src/pages/master/walletRule/blocks/ListToolbar.tsx

import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { Button } from '@/components/ui/button';
import { useManageWalletRuleContext } from '../hooks/useManageWalletRuleContext';
import { useCallApi } from '@/hooks';
import { apiConfig } from '@/config/api.config';
import { useEffect, useState } from 'react';
import { toast } from 'sonner';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@/components/ui/select';

const API_URL_WALLET = apiConfig.service_master_data;
const API_URL_GROUP = apiConfig.service_customer;

const ListToolbar = () => {
  const { table, reload } = useDataGrid();
  const { GetData } = useCallApi();
  const { handleAddDialog } = useManageWalletRuleContext();
  const [wallets, setWallets] = useState([]);
  const [groups, setGroups] = useState([]);
  const [walletFilter, setWalletFilter] = useState<string>('');
  const [groupFilter, setGroupFilter] = useState<string>('');

  const handleClearFilter = () => {
    setWalletFilter('');
    setGroupFilter('');
    table.getColumn('wallet_name')?.setFilterValue(undefined);
    table.getColumn('group_name')?.setFilterValue(undefined);
  };

  useEffect(() => {
    const fetchWallets = async (sorting: any) => {
      try {
        const response = await GetData(`${API_URL_WALLET}/wallet/list`, {
          limit: 25,
          page: 1,
          with_deleted: false,
          order_field: sorting[0].id,
          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
        });
        setWallets(response?.data.list.map((item: any) => ({ id: item.id, name: item.name })));
      } catch (error) {
        toast.error('Failed to get Wallets');
      }
    };

    const fetchGroups = async (sorting: any) => {
      try {
        const response = await GetData(`${API_URL_GROUP}/groups/list`, {
          limit: 25,
          page: 1,
          with_deleted: false,
          order_field: sorting[0].id,
          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
        });
        setGroups(response?.data.list.map((item: any) => ({ id: item.id, name: item.name })));
      } catch (error) {
        toast.error('Failed to get Groups');
      }
    };

    fetchWallets([{ id: 'wallets.name', desc: false }]);
    fetchGroups([{ id: 'name', desc: false }]);
  }, []);

  useEffect(() => {
    const filters: Record<string, any> = {};

    if (walletFilter) {
      filters['id_wallet'] = walletFilter;
    }

    if (groupFilter) {
      filters['id_group'] = groupFilter;
    }

    table.setColumnFilters([
      {
        id: 'custom',
        value: JSON.stringify(filters)
      }
    ]);
  }, [walletFilter, groupFilter]);

  // console.log(wallets);

  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">
          {/* Left Side: Filters */}
          <div className="flex w-[60%] gap-3 items-end">
            {/* Wallet Filter */}
            <div className="flex flex-col w-1/3">
              <label htmlFor="wallet-filter" className="text-sm font-medium text-gray-700 mb-2">
                Filter by Wallet
              </label>
              <Select value={walletFilter} onValueChange={(value) => setWalletFilter(value)}>
                <SelectTrigger className="input input-sm h-[31px]">
                  <SelectValue placeholder="Select Wallet" />
                </SelectTrigger>
                <SelectContent>
                  {wallets.map((wallet: any) => (
                    <SelectItem key={wallet.id} value={wallet.id.toString()}>
                      {wallet.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* Group Filter */}
            <div className="flex flex-col w-1/3">
              <label htmlFor="group-filter" className="text-sm font-medium text-gray-700 mb-2 ">
                Filter by Group
              </label>
              <Select value={groupFilter} onValueChange={(value) => setGroupFilter(value)}>
                <SelectTrigger className="input input-sm h-[31px]">
                  <SelectValue placeholder="Select Group" />
                </SelectTrigger>
                <SelectContent>
                  {groups.map((group: any) => (
                    <SelectItem key={group.id} value={group.id.toString()}>
                      {group.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* Reset Filter Button */}
            <div className="flex flex-col">
              <label className="text-sm font-medium text-transparent mb-1">Reset</label>
              <DefaultTooltip title="Reset Filter" placement="top">
                <Button variant="outline" className="h-[31px] w-full" onClick={handleClearFilter}>
                  <KeenIcon icon="arrow-circle-left" />
                </Button>
              </DefaultTooltip>
            </div>
          </div>

          {/* Right Side: Action Buttons */}
          <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;