import { useCallback, useState } from 'react';

import type { CSSProperties, FC, ReactNode } from 'react';
import type { ClickableOnClick } from '../Clickable';

import Clickable from '../Clickable';
import Modal from '../Modal';
import Text from '../Text';

export interface ClickableModalProps {
  text: ReactNode;
  style?: CSSProperties;
  className?: string;
  children: ReactNode;
}

const ClickableModal: FC<ClickableModalProps> = ({
  text,
  children,
  style,
  className,
}) => {
  const [modalOpen, setModalOpen] = useState(false);

  return (
    <>
      <Clickable
        className={className}
        style={style}
        tabIndex={-1}
        onClick={useCallback<ClickableOnClick>(({ event }) => {
          event.stopPropagation();
          setModalOpen(true);
        }, [])}
      >
        {children}
      </Clickable>
      {modalOpen && (
        <Modal
          onClose={() => setModalOpen(false)}
          renderContent={() => (
            <Text
              size="2.6rem"
              isCentered
              maxWidth="40rem"
              centered
              isParagraph
            >
              {text}
            </Text>
          )}
        />
      )}
    </>
  );
};

export default ClickableModal;