import { createElement, useState } from 'react';
import {
  ArgsTable,
  Canvas,
  Meta,
  Source,
  Story
} from '@storybook/addon-docs/blocks';
import Button from 'components/Button';
import ButtonGroup from 'components/ButtonGroup';
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'components/Modal';
import Typography from 'components/Typography';
import CWBTheme, { ThemeProvider } from 'styles/CWBTheme';
import 'bootstrap/dist/css/bootstrap.min.css';

<Meta title="Components API/Modal" component={Modal} />

# Modal

Creates a dialog to prompt input or give feedback.

<Canvas>
  <Story name="Modal">
    {() => {
      const [open, setOpen] = useState(false);
      return (
        <>
          <Button onClick={() => setOpen(true)}>Open Modal</Button>
          <Modal isOpen={open} onClose={() => setOpen(false)}>
            <ModalHeader onClose={() => setOpen(false)}>
              Exemplary Modal
            </ModalHeader>
            <ModalBody>
              <Typography>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Vestibulum commodo lobortis augue, non elementum dolor.
              </Typography>
            </ModalBody>
            <ModalFooter>
              <ButtonGroup>
                <Button onClick={() => setOpen(false)}>Save</Button>
                <Button variant="secondary" onClick={() => setOpen(false)}>
                  Close
                </Button>
              </ButtonGroup>
            </ModalFooter>
          </Modal>
        </>
      );
    }}
  </Story>
</Canvas>

<Source code="import { Modal, ModalHeader, ModalBody, ModalFooter } from 'cwb-react';" />

## Usage

First, make sure your project has the reactstrap styles imported, ideally somewhere close to the root.

<Source code="import 'bootstrap/dist/css/bootstrap.min.css';" />

Modals have a predefined structure. They usually consist of a header, a body with some content and a footer with some actions.

<Source
  code={
    '<Modal>\n' +
    '  <ModalHeader>\n' +
    '    {/* Header goes here, no need to use the Typography component */}\n' +
    '  </ModalHeader>\n' +
    '  <ModalBody>\n' +
    '    {/* Content goes in here */}\n' +
    '  </ModalBody>\n' +
    '  <ModalFooter>\n' +
    '    {/* Actions go in here, you can use a ButtonGroup and Buttons */}\n' +
    '  </ModalFooter>\n' +
    '</Modal>'
  }
/>

Destructive versions exist for the destructive actions. They can be displayed by passing the `destructive` prop into the ModalHeader.

<ThemeProvider theme={CWBTheme}>
  <Canvas style={{ marginBottom: '0' }}>
    {createElement(() => {
      const [open, setOpen] = useState(false);
      return (
        <>
          <Button destructive onClick={() => setOpen(true)}>
            Open Destructive Modal
          </Button>
          <Modal isOpen={open} onClose={() => setOpen(false)}>
            <ModalHeader destructive onClose={() => setOpen(false)}>
              Exemplary Destructive Modal
            </ModalHeader>
            <ModalBody>
              <Typography>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Vestibulum commodo lobortis augue, non elementum dolor.
              </Typography>
            </ModalBody>
            <ModalFooter>
              <ButtonGroup>
                <Button destructive onClick={() => setOpen(false)}>
                  Delete
                </Button>
                <Button
                  destructive
                  variant="tertiary"
                  onClick={() => setOpen(false)}
                >
                  Close
                </Button>
              </ButtonGroup>
            </ModalFooter>
          </Modal>
        </>
      );
    })}
  </Canvas>
  <div style={{ marginTop: '-20px' }}>
    <Source
      code={
        'const [open, setOpen] = useState(false);\n' +
        'return (\n' +
        '  <>\n' +
        '    <Button\n' +
        '      destructive\n' +
        '      onClick={() => setOpen(true)}\n' +
        '    >\n' +
        '      Open Destructive Modal\n' +
        '    </Button>\n' +
        '    <Modal isOpen={open} onClose={() => setOpen(false)}>\n' +
        '      <ModalHeader destructive onClose={() => setOpen(false)}>\n' +
        '        Exemplary Destructive Modal\n' +
        '      </ModalHeader>\n' +
        '      <ModalBody>\n' +
        '        <Typography>\n' +
        '          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo lobortis augue, non elementum dolor.\n' +
        '        </Typography>\n' +
        '      </ModalBody>\n' +
        '      <ModalFooter>\n' +
        '        <ButtonGroup>\n' +
        '          <Button destructive onClick={() => setOpen(false)}>\n' +
        '            Delete\n' +
        '          </Button>\n' +
        '          <Button\n' +
        '            destructive\n' +
        '            variant="tertiary"\n' +
        '            onClick={() => setOpen(false)}\n' +
        '          >\n' +
        '            Close\n' +
        '          </Button>\n' +
        '        </ButtonGroup>\n' +
        '      </ModalFooter>\n' +
        '    </Modal>\n' +
        '  </>\n' +
        ');'
      }
    />
  </div>
</ThemeProvider>

Modals can be closed by clicking outside of the Modal or by clicking the close icon in the top right corner of the Modal. To control how a Modal can be closed, you can pass the `onClose` callback to `Modal` or `ModalHeader`, which allow closing by outside-click and closing by clicking the close icon, respectively. Of course, you can also render a Button inside the Modal that allows you to close it.

## Modal Props

<ArgsTable of={Modal} />

## ModalHeader Props

<ArgsTable of={ModalHeader} />