import { Layout, Playground, Attributes } from 'lib/components'
import { Modal, Button, Code, useModal, Note, Link } from 'components'
import NextLink from 'next/link'
import { useState } from 'react'

export const meta = {
  title: 'modal',
  group: 'Feedback',
}

## Modal

Display popup content that requires attention or provides additional information.

<Note>
  Just want a text notification?
  Try <NextLink href="/en-us/components/toast"><Link color>Toast component</Link></NextLink>.
</Note>

<Playground
  title="Basic"
  desc="Use `open` control whether `Modal` is displayed."
  scope={{ Modal, Button, useState }}
  code={`
() => {
  const [state, setState] = useState(false)
  const handler = () => setState(true)
  const closeHandler = (event) => {
    setState(false)
    console.log('closed')
  }
  return (
    <div>
      <Button auto onClick={handler}>Show Modal</Button>
      <Modal open={state} onClose={closeHandler}>
        <Modal.Title>Modal</Modal.Title>
        <Modal.Subtitle>This is a modal</Modal.Subtitle>
        <Modal.Content>
          <p>Some content contained within the modal.</p>
        </Modal.Content>
        <Modal.Action passive>Cancel</Modal.Action>
        <Modal.Action>Submit</Modal.Action>
      </Modal>
    </div>
  )
}
`} />


<Playground
  title={<>With <Code>useModal</Code></>}
  desc="Use `hooks` for easier control `Modal`."
  scope={{ Modal, Button, useModal }}
  code={`
() => {
  const { visible, setVisible, bindings } = useModal()
  return (
    <>
      <Button auto onClick={() => setVisible(true)}>Show Modal</Button>
      <Modal {...bindings}>
        <Modal.Title>Modal</Modal.Title>
        <Modal.Subtitle>This is a modal</Modal.Subtitle>
        <Modal.Content>
          <p>Some content contained within the modal.</p>
        </Modal.Content>
        <Modal.Action passive>Cancel</Modal.Action>
        <Modal.Action>Submit</Modal.Action>
      </Modal>
    </>
  )
}
`} />

<Playground
  title="Without Actions"
  desc="Hide all action buttons."
  scope={{ Modal, Button, useState }}
  code={`
() => {
  const [state, setState] = useState(false)
  const handler = () => setState(true)
  const closeHandler = (event) => {
    setState(false)
    console.log('closed')
  }
  return (
    <div>
      <Button auto onClick={handler}>Show Modal</Button>
      <Modal open={state} onClose={closeHandler}>
        <Modal.Title>Modal</Modal.Title>
        <Modal.Subtitle>This is a modal</Modal.Subtitle>
        <Modal.Content>
          <p>Some content contained within the modal.</p>
        </Modal.Content>
      </Modal>
    </div>
  )
}
`} />

<Playground
  title="Disable Action"
  desc="Disable one of the buttons."
  scope={{ Modal, Button, useState }}
  code={`
() => {
  const [state, setState] = useState(false)
  const handler = () => setState(true)
  const closeHandler = (event) => {
    setState(false)
    console.log('closed')
  }
  return (
    <>
      <Button auto onClick={handler}>Show Modal</Button>
      <Modal open={state} onClose={closeHandler}>
        <Modal.Title>Modal</Modal.Title>
        <Modal.Subtitle>This is a modal</Modal.Subtitle>
        <Modal.Content>
          <p>Some content contained within the modal.</p>
        </Modal.Content>
        <Modal.Action passive>Cancel</Modal.Action>
        <Modal.Action disabled>Submit</Modal.Action>
      </Modal>
    </>
  )
}
`} />


<Playground
  title="Customizable"
  desc="Custom `width` or `className`."
  scope={{ Modal, Button, useModal }}
  code={`
() => {
  const { setVisible, bindings } = useModal()
  return (
    <div>
      <Button auto onClick={() => setVisible(true)}>Show Modal</Button>
      <Modal width="35rem" {...bindings}>
        <Modal.Title>My Favorites</Modal.Title>
        <Modal.Content>
          <p>This is the width I want.</p>
        </Modal.Content>
      </Modal>
    </div>
  )
}
`} />

<Attributes edit="/pages/en-us/components/modal.mdx">
<Attributes.Title>Modal.Props</Attributes.Title>

| Attribute | Description | Type | Accepted values | Default
| ---------- | ---------- | ---- |  -------------- | ------ |
| **open** | open or close | `boolean` | - | `false` |
| **onOpen** | open event | `() => void` | - | - |
| **onClose** | open event | `() => void` | - | - |
| **width** | width of the modal dialog | `string` | - | `26rem` |
| **wrapClassName** | className of the modal dialog | `string` | - | - |
| **disableBackdropClick** | click background and don't close  | `boolean` | - | `false` |
| ... | native props | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - |

<Attributes.Title>Modal.Title.Props</Attributes.Title>

| Attribute | Description | Type | Accepted values | Default
| ---------- | ---------- | ---- |  -------------- | ------ |
| ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - |

<Attributes.Title>Modal.Subtitle.Props</Attributes.Title>

| Attribute | Description | Type | Accepted values | Default
| ---------- | ---------- | ---- |  -------------- | ------ |
| ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - |

<Attributes.Title>Modal.Content.Props</Attributes.Title>

| Attribute | Description | Type | Accepted values | Default
| ---------- | ---------- | ---- |  -------------- | ------ |
| ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - |

<Attributes.Title>Modal.Actions.Props</Attributes.Title>

| Attribute | Description | Type | Accepted values | Default
| ---------- | ---------- | ---- |  -------------- | ------ |
| - | - | - | - | - |

<Attributes.Title>Modal.Action.Props</Attributes.Title>

| Attribute | Description | Type | Accepted values | Default
| ---------- | ---------- | ---- |  -------------- | ------ |
| **passive** | display passive mode | `boolean` | - | `false` |
| **disabled** | disable current action | `boolean` | - | `false` |
| **onClick** | click handler | [(event: ModalActionEvent) => void](#modalactionevent) | - | - |
| ... | native props | `ButtonHTMLAttributes` | `'id', 'className', ...` | - |

<Attributes.Title>useModal</Attributes.Title>

```ts
type useModal = (initialVisible: boolean) => {
  visible: boolean
  setVisible: Dispatch<SetStateAction<boolean>>
  currentRef: MutableRefObject<boolean>
  bindings: {
    open: boolean
    onClose: () => void
  }
}
```

<Attributes.Title>ModalActionEvent</Attributes.Title>

```ts
type ModalActionEvent = MouseEvent<HTMLButtonElement> & {
  close: () => void
}
```

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
