import React from 'react';
import { Button, Tooltip } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import { useDispatch, useSelector } from 'react-redux';
import { deleteWorkThunk } from '@/states/patient/worklist/slices/workSlice';
import { FormattedMessage } from 'react-intl';
import { AppDispatch, RootState } from '@/states/store';

interface ActionButtonProps {
  icon: React.ReactNode;
  tooltip: React.ReactNode;
  onClick?: () => void;
}

const ActionButton: React.FC<ActionButtonProps> = ({
  icon,
  tooltip,
  onClick,
}) => (
  <Tooltip title={tooltip}>
    <Button icon={icon} onClick={onClick} />
  </Tooltip>
);

const ActionPanel: React.FC = () => {
  const dispatch = useDispatch<AppDispatch>();
  const selectedIds = useSelector(
    (state: RootState) => state.workSelection.selectedIds
  );

  const handleDelete = () => {
    dispatch(deleteWorkThunk(selectedIds)); // Use the selected IDs from the Redux state
  };

  return (
    <div className="flex flex-wrap gap-2 w-full">
      <ActionButton
        icon={<DeleteOutlined />}
        tooltip={
          <FormattedMessage
            id="actionPanel.deleteTask"
            defaultMessage="actionPanel.deleteTask"
          />
        }
        onClick={handleDelete}
      />
      <ActionButton
        icon={<DeleteOutlined />}
        tooltip={
          <FormattedMessage
            id="actionPanel.editPatient"
            defaultMessage="actionPanel.editPatient"
          />
        }
      />
      <ActionButton
        icon={<DeleteOutlined />}
        tooltip={
          <FormattedMessage
            id="actionPanel.lockTask"
            defaultMessage="actionPanel.lockTask"
          />
        }
      />
      <ActionButton
        icon={<DeleteOutlined />}
        tooltip={
          <FormattedMessage
            id="actionPanel.risSync"
            defaultMessage="actionPanel.risSync"
          />
        }
      />
      <ActionButton
        icon={<DeleteOutlined />}
        tooltip={
          <FormattedMessage
            id="actionPanel.reRegister"
            defaultMessage="actionPanel.reRegister"
          />
        }
      />
      <ActionButton
        icon={<DeleteOutlined />}
        tooltip={
          <FormattedMessage
            id="actionPanel.saveLocal"
            defaultMessage="actionPanel.saveLocal"
          />
        }
      />
      <ActionButton
        icon={<DeleteOutlined />}
        tooltip={
          <FormattedMessage
            id="actionPanel.importXLS"
            defaultMessage="actionPanel.importXLS"
          />
        }
      />
      <ActionButton
        icon={<DeleteOutlined />}
        tooltip={
          <FormattedMessage
            id="actionPanel.sortList"
            defaultMessage="actionPanel.sortList"
          />
        }
      />
      <ActionButton
        icon={<DeleteOutlined />}
        tooltip={
          <FormattedMessage
            id="actionPanel.cloudShare"
            defaultMessage="actionPanel.cloudShare"
          />
        }
      />
      <ActionButton
        icon={<DeleteOutlined />}
        tooltip={
          <FormattedMessage
            id="actionPanel.imageExchange"
            defaultMessage="actionPanel.imageExchange"
          />
        }
      />
      <ActionButton
        icon={<DeleteOutlined />}
        tooltip={
          <FormattedMessage
            id="actionPanel.qrPrint"
            defaultMessage="actionPanel.qrPrint"
          />
        }
      />
      <ActionButton
        icon={<DeleteOutlined />}
        tooltip={
          <FormattedMessage
            id="actionPanel.send"
            defaultMessage="actionPanel.send"
          />
        }
      />
      <ActionButton
        icon={<DeleteOutlined />}
        tooltip={
          <FormattedMessage
            id="actionPanel.burn"
            defaultMessage="actionPanel.burn"
          />
        }
      />
      <ActionButton
        icon={<DeleteOutlined />}
        tooltip={
          <FormattedMessage
            id="actionPanel.export"
            defaultMessage="actionPanel.export"
          />
        }
      />
      <ActionButton
        icon={<DeleteOutlined />}
        tooltip={
          <FormattedMessage
            id="actionPanel.import"
            defaultMessage="actionPanel.import"
          />
        }
      />
    </div>
  );
};

export default ActionPanel;