import { ComponentStory, ComponentMeta } from '@storybook/react';
import { ConfirmationModal } from './ConfirmationModal/ConfirmationModal';
import { Modal } from './Modal';
import { ModalContent } from './ModalContent/ModalContent';

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'Components/Modal',
  component: Modal
} as ComponentMeta<typeof Modal>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof Modal> = (args) => <Modal {...args} />;
const ConfirmationTemplate: ComponentStory<typeof ConfirmationModal> = (args) => <ConfirmationModal {...args} />;

const ModalDialogContent: () => JSX.Element = () => <ModalContent> This is a modal content component </ModalContent>;

export const RegularModal = Template.bind({});
RegularModal.args = {
  topic: 'This is a modal header',
  open: true,
  dialogContent: <ModalDialogContent />,
  modalqas: {
    content: 'modal-content',
    modal: 'modal',
    title: 'modal-title'
  }
};

export const ConfirmationWarningModal = ConfirmationTemplate.bind({});
ConfirmationWarningModal.args = {
  modalType: 'warning',
  open: true,
  topic: 'Sample warning topic',
  cancelButtonText: 'CANCEL',
  okButtonText: 'OK',
  confirmAction: () => console.log,
  closeAction: () => console.log,
  modalqas: {
    modal: 'sample',
    content: 'sample-content',
    title: 'sample-title',
    actions: 'sample-actions',
    actionCancel: 'sample-action-cancel',
    actionConfirm: 'sample-action-confirm'
  },
  dialogContent: <ModalDialogContent />
};

export const ConfirmationCheckModal = ConfirmationTemplate.bind({});
ConfirmationCheckModal.args = {
  modalType: 'check',
  open: true,
  topic: 'Sample confirmation topic',
  cancelButtonText: 'CANCEL',
  okButtonText: 'OK',
  confirmAction: () => console.log,
  closeAction: () => console.log,
  modalqas: {
    modal: 'sample',
    content: 'sample-content',
    title: 'sample-title',
    actions: 'sample-actions',
    actionCancel: 'sample-action-cancel',
    actionConfirm: 'sample-action-confirm'
  },
  dialogContent: <ModalDialogContent />
};