import React from 'react';
import {
  Title,
  Description,
  Primary,
  PRIMARY_STORY,
  ArgsTable,
} from '@storybook/addon-docs/blocks';
import { MdClose } from '@react-icons/all-files/md/MdClose';

import Modal from '.';
import ModalProvider from './modalContext';
import ModalContent from './modal-content';

export default {
  title: 'Theme/Hooks/Modal',
  component: Modal,
  argTypes: {
    content: {
      name: 'content',
      type: { name: 'string', required: false },
      defaultValue: null,
      description: 'The content of the inner modal.',
      table: {
        type: { summary: 'string | element' },
        defaultValue: { summary: null },
      },
    },
    children: {
      name: 'children',
      type: { name: 'string', required: false },
      defaultValue: null,
      description: 'Children of the modal will trigger the opening of the modal on click.',
      table: {
        type: { summary: 'string | element | any' },
        defaultValue: { summary: null },
      },
    },
  },
  parameters: {
    docs: {
      description: {
        component:
          'A component which triggers opening of a modal with more content. Clicking anywhere outside the modal closes it. Pressing esc on the keyboard also closes it.',
      },
      page: () => (
        <>
          <Title />
          <Description />
          <Primary />
          <ArgsTable story={PRIMARY_STORY} />
        </>
      ),
    },
  },
};

const Template = (args) => (
  <ModalProvider>
    <Modal {...args} />
    <ModalContent closeIcon={<MdClose />} />
  </ModalProvider>
);

export const Default = Template.bind({});
Default.args = {
  content:
    'This is the modal content. Any content can be added here. Click on the "x" or outside of the modal to close it. You can also press the "esc" button on your keyboard.',
  children: 'Click here to open the modal',
};
