import { uuid } from '@/utils/uuid';
import ModalSrc, { ModalProps } from '@/components/Modal';
import Button from '@/components/Button';

export default {
  title: 'components',
  args: {
    showCloseButton: false,
    canClickOutsideToClose: true,
    destroyWhenClosed: true,
    controlVisible: false,
    portal: false,
    hiddenScroll: false,
    mask: false,
  },
};

export const Modal: React.FC<ModalProps> = ({
  showCloseButton,
  canClickOutsideToClose,
  controlVisible,
  hiddenScroll,
  portal,
  mask,
}) => {
  return (
    <ModalSrc
      onCancel={() => {
        // to do
      }}
      onOk={() => {
        // to do
      }}
      trigger={<Button label="open modal" />}
      id={uuid()}
      showCloseButton={showCloseButton}
      canClickOutsideToClose={canClickOutsideToClose}
      controlVisible={controlVisible}
      hiddenScroll={hiddenScroll}
      portal={portal}
      mask={mask}
    >
      <>{`random uuid: ${uuid()}`}</>
    </ModalSrc>
  );
};
