import { useState } from 'react';
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { Modal } from './Modal';
import { Button } from '../Button/Button';
import { SelectInput } from '../SelectInput/SelectInput';
import { useOpenClose } from '../../hooks/useOpenClose/useOpenClose';

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

# Modal

Modals are containers appearing in front of the main content to provide critical information or an actionable piece of content.
These are specifically great for presenting new flows while preserving the state of content.

The default behavior of a Modal is to focus on the first focusable item.
Therefore, you should ensure that the first focusable item is non-destructive, such as a "cancel" or close button.

Modal consists of three child components that are automatically included with the `<Modal />`:

1. `<Modal.Header />` - a standard header of a Modal, which may contain a title for the Modal's contents and a close button
1. `<Modal.Body />` - for the body of the Modal
1. `<Modal.Footer />` - a place for primary actions for the Modals's contents

## Basic Usage

In order to hide or show the Modal, set the Modal's `isOpen` prop to `true` or `false`.

<Canvas>
  <Story
    name="Basic Usage"
    parameters={{
      design: {
        type: 'figma',
        url: 'https://www.figma.com/file/k1kOsplTGXvSSMQQCzhCND/Palmetto-Design-System?node-id=618%3A7847',
      },
    }}
  >
    {() => {
      const {
        isOpen: isModalOpen,
        handleOpen: openModal,
        handleClose: closeModal,
      } = useOpenClose();
      return (
        <div>
          <Button variant="primary" tone="neutral" onClick={openModal}>
            Show Modal
          </Button>
          <Modal
            ariaLabelledBy="titleBasic"
            isOpen={isModalOpen}
            onDismiss={closeModal}
          >
            <Modal.Header
              id="titleBasic"
              title="The Modal Title"
              onDismiss={closeModal}
            />
            <Modal.Body>Modal content</Modal.Body>
            <Modal.Footer>
              <Button variant="secondary" tone="neutral" onClick={closeModal}>
                Cancel
              </Button>
              <Button variant="primary">Primary Action</Button>
            </Modal.Footer>
          </Modal>
        </div>
      );
    }}
  </Story>
</Canvas>

## Props

<ArgsTable of={Modal} />

## Body and Footer

Use the `Modal.Body` and `Modal.Footer` to add body and footer content. These components simply wrap your content in consistent padding, otherwise you can pass whatever you want as content.

<Canvas>
  <Story
    name="Body and Footer"
    parameters={{
      chromatic: { disableSnapshot: true },
      design: {
        type: 'figma',
        url: 'https://www.figma.com/file/k1kOsplTGXvSSMQQCzhCND/Palmetto-Design-System?node-id=618%3A7847',
      },
    }}
  >
    {() => {
      const {
        isOpen: isModalOpen,
        handleOpen: openModal,
        handleClose: closeModal,
      } = useOpenClose();
      return (
        <div>
          <Button variant="primary" tone="neutral" onClick={openModal}>
            Show Modal With Body and Footer
          </Button>
          <Modal
            ariaLabelledBy="titleFooterBody"
            isOpen={isModalOpen}
            onDismiss={closeModal}
          >
            <Modal.Header
              id="titleFooterBody"
              title="The Modal Title"
              onDismiss={closeModal}
            />
            <Modal.Body>Modal body content</Modal.Body>
            <Modal.Footer>This is content in the modal footer</Modal.Footer>
          </Modal>
        </div>
      );
    }}
  </Story>
</Canvas>

## Close button

Set the `onDismiss` prop on the `Modal.Header` to true to automatically add a close button.

<Canvas>
  <Story
    name="Close button"
    parameters={{
      chromatic: { disableSnapshot: true },
      design: {
        type: 'figma',
        url: 'https://www.figma.com/file/k1kOsplTGXvSSMQQCzhCND/Palmetto-Design-System?node-id=618%3A7847',
      },
    }}
  >
    {() => {
      const {
        isOpen: isModalOpen,
        handleOpen: openModal,
        handleClose: closeModal,
      } = useOpenClose();
      return (
        <div>
          <Button variant="primary" tone="neutral" onClick={openModal}>
            Show Modal With Close Button
          </Button>
          <Modal
            ariaLabel="modal with close button"
            isOpen={isModalOpen}
            onDismiss={closeModal}
          >
            <Modal.Header onDismiss={closeModal} />
            <Modal.Body>Modal content</Modal.Body>
          </Modal>
        </div>
      );
    }}
  </Story>
</Canvas>

## Without a Header

Omit `<Modal.Header/>` to render a minimal modal without a header.

<Canvas>
  <Story
    name="Without Header"
    parameters={{
      chromatic: { disableSnapshot: true },
      design: {
        type: 'figma',
        url: 'https://www.figma.com/file/k1kOsplTGXvSSMQQCzhCND/Palmetto-Design-System?node-id=618%3A7847',
      },
    }}
  >
    {() => {
      const {
        isOpen: isModalOpen,
        handleOpen: openModal,
        handleClose: closeModal,
      } = useOpenClose();
      return (
        <div>
          <Button variant="primary" tone="neutral" onClick={openModal}>
            Show Modal Without Header
          </Button>
          <Modal
            ariaLabel="Modal without a header"
            isOpen={isModalOpen}
            onDismiss={closeModal}
          >
            <Modal.Body>Modal content</Modal.Body>
            <Modal.Footer>
              <Button variant="secondary" tone="neutral" onClick={closeModal}>
                Cancel
              </Button>
              <Button variant="primary">Primary Action</Button>
            </Modal.Footer>
          </Modal>
        </div>
      );
    }}
  </Story>
</Canvas>

## Fullscreen on mobile

Use `fullScreenMobile` to enable fullscreen at mobile viewport widths.

<Canvas>
  <Story
    name="Fullscreen Mobile"
    parameters={{
      chromatic: { disableSnapshot: true },
    }}
  >
    {() => {
      const {
        isOpen: isModalOpen,
        handleOpen: openModal,
        handleClose: closeModal,
      } = useOpenClose();
      return (
        <div>
          <Button variant="primary" tone="neutral" onClick={openModal}>
            Show Fullscreen On Mobile Modal
          </Button>
          <Modal
            ariaLabelledBy="titleFullscreen"
            fullScreenMobile
            isOpen={isModalOpen}
            onDismiss={closeModal}
          >
            <Modal.Header
              id="titleFullscreen"
              title="Fullscreen Modal on Mobile"
              onDismiss={closeModal}
            />
            <Modal.Body>Modal content</Modal.Body>
            <Modal.Footer>
              <Button variant="secondary" tone="neutral" onClick={closeModal}>
                Cancel
              </Button>
              <Button variant="primary">Primary Action</Button>
            </Modal.Footer>
          </Modal>
        </div>
      );
    }}
  </Story>
</Canvas>

## Max Width

Use the `maxWidth` prop for modals that have minimal content or form fields that may not look right at a larger width.
As with the `Box` component, this can be set to a specific pixel value, or any of the existing width tokens. For responsive
maxWidth, use existing tokens only.

<Canvas>
  <Story
    name="Max Width"
    parameters={{
      chromatic: { disableSnapshot: true },
    }}
  >
    {() => {
      const {
        isOpen: isModalOpen,
        handleOpen: openModal,
        handleClose: closeModal,
      } = useOpenClose();
      return (
        <>
          <Button variant="primary" tone="neutral" onClick={openModal}>
            Open Max Width Modal
          </Button>
          <Modal
            ariaLabelledBy="titleFooterBody"
            isOpen={isModalOpen}
            onDismiss={closeModal}
            maxWidth={{ tablet: '3xl', desktop: '4xl', hd: '5xl' }}
          >
            <Modal.Header
              id="titleFooterBody"
              title="The Modal Title"
              onDismiss={closeModal}
            />
            <Modal.Body>Modal body content</Modal.Body>
            <Modal.Footer>This is content in the modal footer</Modal.Footer>
          </Modal>
        </>
      );
    }}
  </Story>
</Canvas>
