import { useCallback, useState } from 'react';

import type { FC } from 'react';
import type { ClickableOnClick, ClickableProps } from '../Clickable';
import type { ModalActionsProps } from '../ModalActions';

import Clickable from '../Clickable';
import ModalActions from '../ModalActions';

export interface ClickableModalActionsProps
  extends ModalActionsProps,
    ClickableProps {}

const ClickableModalActions: FC<ClickableModalActionsProps> = ({
  items,
  ...clickableProps
}) => {
  const [modalOpen, setModalOpen] = useState(false);

  return (
    <>
      <Clickable
        {...clickableProps}
        onClick={useCallback<ClickableOnClick>(({ event }) => {
          event.stopPropagation();
          setModalOpen(true);
        }, [])}
      />
      {modalOpen && (
        <ModalActions onClose={() => setModalOpen(false)} items={items} />
      )}
    </>
  );
};

export default ClickableModalActions;