'use client';

import React, { memo, useState } from 'react';
import TableSettings from '../setting-tools/TableSettings';
import MultiActionButton from '../setting-tools/MultiActionButton';
import DownloadButton from '../setting-tools/DownloadButton';
import AddButton from '../setting-tools/AddButton';
import { TableProps } from '@/types';
import CommonFilters from '../filters/CommonFilters';
import CommonImage from '../CommonImage';
import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
import { AppDispatch, store } from '@/store/store';
import { useDispatch } from 'react-redux';
import {
  setFilterArguments,
  setIsFilterApplied,
  triggerFormReset,
} from '@/store/slices/filtersSlice';
import AddSubAgentBonus from '@/components/visa-commission/bonus/sub-agent/AddSubAgentBonus';
import AddCommissionContract from '@/components/visa-commission/contracts/forms/AddCommissionContract';
import AddCommissionEnquiry from '@/components/visa-commission/enquiry/forms/AddCommissionEnquiry';
import AddCommissionBonus from '@/components/visa-commission/bonus/AddCommissionBonus';
import AddSubAgentCommission from '@/components/visa-commission/sub-agent/forms/AddSubAgentCommission';
import { COMMISSION_CONTRACT_TABLES } from '@/constants';

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

const SettingTools: React.FC<TableProps> = ({
  bucket,
  tableData,
  handlePaginatedRecords,
}) => {
  const dispatch = useDispatch<AppDispatch>();
  const { columns } = tableData;
  const [menuOpen, setMenuOpen] = useState(false);

  const COMMISSION_ENQUIRY_TABLES = [
    'VISA_COMMISSION_INSTITUTE_ENQUIRY',
    'VISA_COMMISSION_MASTER_AGENT_ENQUIRY',
  ];

  const COMMISSION_BONUS_TABLES = [
    'INSTITUTE_BONUS_RECEIVED',
    'MASTER_AGENT_BONUS_RECEIVED',
  ];

  const handleOnSuccess = () => {
    handlePaginatedRecords?.(store.getState().tableSettings.current_page, {});
  };

  type MultiActionItem = {
    permission: boolean;
    endpoint: string;
  };

  const items = bucket?.tools?.multi_action_button as Record<
    string,
    MultiActionItem
  >;

  const hasAnyPermission = items
    ? Object.values(items).some((item) => item.permission)
    : false;

  return (
    <>
      {store.getState().filters.is_applied && (
        <button
          type="button"
          aria-label={`Reset Filters`}
          className={`add-icn wo-fts-filter-bts flex justify-center items-center p-2 hover:bg-gray-100 rounded transition-colors ${store.getState().filters.is_applied ? 'refresh-icon-active' : ''}`}
          onClick={() => {
            store.dispatch(triggerFormReset(true));
            dispatch(setFilterArguments(null));
            dispatch(setIsFilterApplied(false));
            handlePaginatedRecords?.(1, {});
          }}
        >
          <CommonImage
            src="/main/refresh-icn.webp"
            width={20}
            height={20}
            alt="Reset Filters"
            aria-hidden="true"
            classname="add-icon"
          />
          <VisuallyHidden>Reset Filters</VisuallyHidden>
        </button>
      )}

      {/* ================= Actions ================= */}
      {(() => {
        const actions = [
          bucket?.crud?.add?.permission &&
            (COMMISSION_CONTRACT_TABLES.includes(bucket.table_id) ? (
              <AddCommissionContract
                key="add-contract"
                bucket={bucket}
                handlePaginatedRecords={handlePaginatedRecords}
              />
            ) : COMMISSION_ENQUIRY_TABLES.includes(bucket.table_id) ? (
              <AddCommissionEnquiry
                key="add-enquiry"
                bucket={bucket}
                handlePaginatedRecords={handlePaginatedRecords}
              />
            ) : COMMISSION_BONUS_TABLES.includes(bucket.table_id) ? (
              <AddCommissionBonus
                key="add-bonus"
                bucket={bucket}
                handlePaginatedRecords={handlePaginatedRecords}
              />
            ) : bucket.table_id === 'SUB_AGENT_BONUS' ? (
              <AddSubAgentBonus
                key="add-sub-agent-bonus"
                bucket={bucket}
                handlePaginatedRecords={handlePaginatedRecords}
              />
            ) : bucket.table_id === 'SUB_AGENT_COMMISSION' ? (
              <AddSubAgentCommission
                key="add-sub-agent-commission"
                bucket={bucket}
                handlePaginatedRecords={handlePaginatedRecords}
              />
            ) : (
              <AddButton
                key="add-default"
                bucket={bucket}
                onSuccess={handleOnSuccess}
              />
            )),

          bucket?.tools?.multi_action_button && hasAnyPermission && (
            <MultiActionButton
              key="multi-action"
              actions={bucket.tools.multi_action_button}
              handlePaginatedRecords={handlePaginatedRecords}
            />
          ),
        ].filter(Boolean);

        if (!actions.length) return null;

        if (actions.length === 1) return actions[0];
        const menuDropClose = () => {
          document
            .querySelector('.table-menu-dropdown-widget')
            ?.classList.remove('unactive');
          setMenuOpen(true);
        };
        return (
          <DropdownMenu
            modal={false}
            open={menuOpen}
            onOpenChange={setMenuOpen}
          >
            <DropdownMenuTrigger asChild>
              <button
                type="button"
                aria-label="Actions menu"
                className="setting-icn wo-fts-filter-bts flex items-center justify-center p-2 hover:bg-gray-100 rounded transition-colors"
                onClick={menuDropClose}
              >
                <CommonImage
                  src="/main/dropdown-toggle.webp"
                  width={20}
                  height={20}
                  alt=""
                  aria-hidden="true"
                  classname="info-icon"
                />
              </button>
            </DropdownMenuTrigger>

            <DropdownMenuContent
              align="end"
              className="p-2 w-48 dropdownlist-menu shadow-lg table-menu-dropdown-widget"
            >
              {actions}
            </DropdownMenuContent>
          </DropdownMenu>
        );
      })()}

      {bucket?.tools?.table_settings && columns && (
        <TableSettings
          bucket={bucket}
          tableData={tableData}
          handlePaginatedRecords={handlePaginatedRecords}
        />
      )}

      {bucket?.tools?.csv_download && (
        <DownloadButton
          bucket={bucket}
          tableData={tableData}
          total={Math.ceil(tableData?.pagination?.total || 0)}
        />
      )}

      {bucket?.tools?.filters && (
        <CommonFilters
          bucket={bucket}
          handlePaginatedRecords={handlePaginatedRecords}
        />
      )}
    </>
  );
};

export default memo(SettingTools);