import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { select, text, boolean, number, array } from '@storybook/addon-knobs'
import SpeechBubble from '@helpscout/hsds-illos/speech-bubble'
import { PHONE_OPTIONS } from '../EditableField/EditableField.storiesHelpers'
import { regularItems } from '../../utilities/specs/dropdown.specs'
import Modal from './'
import DropList from '../DropList'
import { SimpleButton } from '../DropList/DropList.togglers'
import EditableTextarea from '../EditableTextarea'
import EditableField from '../EditableField'
import { ModalWithTriggerAndInput, MyModal } from './Modal.storiesHelpers'

<Meta
  title="Components/Overlay/Modal"
  component={Modal}
  parameters={{
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/Wp9mDxTvWicSTWtezj2ImkMP/HSDS-Product?node-id=2582%3A10019',
    },
  }}
/>

# Modal

A Modal component presents content within a container on top of the application's main UI. Modals can have multiple instances, in which case they will overlay on top of each other. This component supports [`react-router`](https://github.com/ReactTraining/react-router).

There are two versions of the Modal component, version 2 is the new standard (version 1 Modals will soon be deprecated).

<Canvas>
  <Story name="default">
    <Modal
      kind={select(
        'Kind',
        {
          alert: 'alert',
          default: 'default',
          branded: 'branded',
          sequence: 'sequence',
        },
        'default'
      )}
      illo={<SpeechBubble />}
      isOpen={false}
      trigger={<button>open modal</button>}
      title="Modal Title"
      version={2}
    >
      <Modal.Body version={2}>
        <p>
          Lorem Lorem sit esse sit minim irure minim voluptate voluptate nostrud
          aliqua. Do tempor qui ad sit amet labore magna proident adipisicing
          nostrud. Adipisicing laborum veniam velit culpa deserunt proident
          ipsum occaecat. Ex duis nulla tempor cillum mollit anim. Est qui
          consectetur qui fugiat. Commodo tempor aute adipisicing dolore est.
          Laboris do sint et reprehenderit consectetur amet cillum quis tempor
          nulla qui ea.
        </p>
        <p>
          Duis tempor deserunt qui Lorem sint exercitation voluptate duis Lorem.
          Sunt et elit nulla consectetur labore. Proident dolore ullamco
          excepteur enim aliqua incididunt culpa magna cupidatat magna non sit.
          Occaecat laborum dolor nisi Lorem ex id occaecat incididunt cupidatat
          ipsum amet nostrud.
        </p>
      </Modal.Body>
      <Modal.ActionFooter
        primaryButtonText={text('primaryButtonText', 'Primary')}
        secondaryButtonText={text('secondaryButtonText', 'Secondary')}
        secondaryButtonDisabled={boolean('secondaryButtonDisabled', false)}
        primaryButtonDisabled={boolean('primaryButtonDisabled', false)}
        cancelProps={{ 'data-cy': 'NewValue' }}
        state={select(
          'State',
          {
            default: '',
            danger: 'danger',
          },
          ''
        )}
      />
    </Modal>
  </Story>
</Canvas>

#### Reference

- **Designer**: Jared
- **Engineering**: Brit
- **Usage**: Everywhere

<br />
<br />

### Props

<ArgsTable of={Modal} />

### SubComponents

#### Modal.HeaderV2

<ArgsTable of={Modal.HeaderV2} />

#### Modal.Body

<ArgsTable of={Modal.Body} />

#### Modal.Content

<ArgsTable of={Modal.Content} />

#### Modal.ActionFooter

<ArgsTable of={Modal.ActionFooter} />

#### Modal.Footer

<ArgsTable of={Modal.Footer} />

#### Modal.Header (v1)

<ArgsTable of={Modal.Header} />

#### Modal.Overlay

<ArgsTable of={Modal.Overlay} />

### Stories

#### Sequence

<Canvas>
  <Story name="sequence">
    <Modal
      version={2}
      isOpen={false}
      kind="sequence"
      description="We'll send a six digit code to confirm ownership."
      numSteps={5}
      step={2}
      trigger={<button>Clicky</button>}
      title="What email address would you like to connect?"
    >
      <Modal.Body version={2}>
        <p>
          Lorem Lorem sit esse sit minim irure minim voluptate voluptate nostrud
          aliqua. Do tempor qui ad sit amet labore magna proident adipisicing
          nostrud. Adipisicing laborum veniam velit culpa deserunt proident
          ipsum occaecat. Ex duis nulla tempor cillum mollit anim. Est qui
          consectetur qui fugiat. Commodo tempor aute adipisicing dolore est.
          Laboris do sint et reprehenderit consectetur amet cillum quis tempor
          nulla qui ea.
        </p>
        <p>
          Duis tempor deserunt qui Lorem sint exercitation voluptate duis Lorem.
          Sunt et elit nulla consectetur labore. Proident dolore ullamco
          excepteur enim aliqua incididunt culpa magna cupidatat magna non sit.
          Occaecat laborum dolor nisi Lorem ex id occaecat incididunt cupidatat
          ipsum amet nostrud.
        </p>
      </Modal.Body>
      <Modal.ActionFooter kind="default" primaryButtonText="Send code" />
    </Modal>
  </Story>
</Canvas>

#### ESC handling

There are components like `DropList`, `EditableField` and `EditableTextarea` that have their own ESC handler, we don't want the Modal to be closed on those cases:

<Canvas>
  <Story name="ESC Handling">
    <Modal
      isOpen={false}
      trigger={<button>open modal</button>}
      title="Modal Title"
      version={2}
    >
      <Modal.Body version={2}>
        <div>
          <DropList
            variant="combobox"
            items={regularItems}
            toggler={<SimpleButton text="DropList combobox" />}
          />
          <br />
          <br />
          <DropList
            items={regularItems}
            toggler={<SimpleButton text="DropList select" />}
          />
          <br />
          <br />
          <EditableTextarea />
          <EditableField
            label="Phone"
            name="Phone"
            placeholder="Add phone"
            type="tel"
            valueOptions={PHONE_OPTIONS}
            defaultOption={PHONE_OPTIONS[2]}
            value={{ option: 'Work', value: '123456789' }}
          />
          <EditableField
            label="Company"
            name="company"
            placeholder="Add a company name"
            type="text"
          />
          <EditableField
            label="Team"
            name="team"
            placeholder="Add a sports team name"
            type="text"
            value="Atlas"
          />
        </div>
      </Modal.Body>
      <Modal.ActionFooter
        primaryButtonText={'Primary'}
        secondaryButtonText={'Secondary'}
      />
    </Modal>
  </Story>
</Canvas>

<Canvas>
  <Story name="focusing element from content">
    <MyModal />
  </Story>
</Canvas>

<Canvas>
  <Story name="modal trigger next to input">
    <ModalWithTriggerAndInput />
  </Story>
</Canvas>
