'use client';

import React from 'react';

import CommonImage from '@/components/common/CommonImage';
import AddMenu from './AddMenu';
import { store } from '@/store/store';
import { useToast } from '@/hooks/use-toast';
import { globalApiPost } from '@/services/global/globalApiCalls';
import { ConfirmDialog } from '../ConfirmDialog';
import { fnEmpty, HandlePaginatedRecords } from '@/types';
import { IMultiButtonActions } from '@/lib/bucketInterfaces';

interface IActionItem {
  action: string;
  endpoint: string;
}

interface MultiActionButtonProps {
  actions: IMultiButtonActions;
  handlePaginatedRecords: HandlePaginatedRecords;
}

const ActionIcon: React.FC<{
  src: string;
  alt: string;
  className?: string;
  width?: number;
  height?: number;
  children: React.ReactNode;
  onClick?: fnEmpty;
  requireConfirmation?: boolean;
}> = ({
  src,
  alt,
  className = '',
  width = 20,
  height = 20,
  children,
  onClick,
  requireConfirmation = true,
}) => {
  const handleTriggerClick = () => {
    const el = document.querySelector('.table-menu-dropdown-widget');
    el?.classList.add('unactive');
  };
  const content = (
    <span
      className={`dropdown-table-icon flex items-center gap-2 ${className}`}
    >
      <CommonImage
        src={src}
        width={width}
        height={height}
        alt={alt}
        classname="table-drop-icon"
      />
      {children}
    </span>
  );

  // If confirmation is not required or no onClick handler, return content directly
  if (!requireConfirmation || !onClick) {
    return content;
  }

  // If confirmation is required and onClick exists, wrap in ConfirmDialog
  return (
    <ConfirmDialog
      message="Do you want to perform this action?"
      onConfirm={onClick}
      trigger={
        <span
          className={`dropdown-table-icon flex items-center gap-2 ${className}`}
          onClick={handleTriggerClick}
        >
          <span>
            <CommonImage
              src={src}
              width={width}
              height={height}
              alt={alt}
              classname="table-drop-icon"
            />
          </span>
          {children}
        </span>
      }
    />
  );
};

const MultiActionButton: React.FC<MultiActionButtonProps> = ({
  actions,
  handlePaginatedRecords,
}) => {
  const { toast } = useToast();
  const proceedAction = async ({ action, endpoint }: IActionItem) => {
    const checkedRows = store.getState().tableSettings.checked_rows ?? [];

    if (!checkedRows.length || !action) {
      toast({
        variant: 'destructive',
        title: 'Select minimum 1 record to process',
        duration: 2000,
      });
    } else {
      await globalApiPost(endpoint, {
        action,
        ids: checkedRows,
      });

      toast({
        variant: 'success',
        title: 'Action performed successfully.',
        duration: 2000,
      });

      handlePaginatedRecords(store.getState().tableSettings.current_page);
    }
  };
  return (
    <div>
      {actions?.add && (
        <AddMenu
          triggerIcon={
            <ActionIcon src="/main/dropdown_menu_table.png" alt="Add Record">
              Add
            </ActionIcon>
          }
        />
      )}
      {actions?.active?.permission && (
        <ActionIcon
          src="/main/Activate.png"
          alt="Activate Record"
          onClick={() =>
            proceedAction({
              action: 'activate',
              endpoint: String(actions?.active?.endpoint),
            })
          }
        >
          Active
        </ActionIcon>
      )}

      {actions?.inactive?.permission && (
        <ActionIcon
          src="/main/Deactivate.png"
          alt="Deactivate Record"
          onClick={() =>
            proceedAction({
              action: 'deactivate',
              endpoint: String(actions?.inactive?.endpoint),
            })
          }
        >
          Inactive
        </ActionIcon>
      )}
    </div>
  );
};

export default React.memo(MultiActionButton);