import { CodeBlock, ConfigBlock } from "@src/helpers/DocBlocks";
import Button from "components/UI/Button";
import Modal from "./Modal";
// import { ContextMenuTest } from './Modal.storybook.js';

# Modal

> A clickable UI element with active and hover states. Indicates to the user that it's clickable.

<CodeBlock>
  {(value, setValue) => (
    <div>
      <Button onClick={() => setValue(true)}> Open Modal </Button>
      <Modal onClose={() => setValue(false)} active={value}>
        <Modal.Header onClose={() => setValue(false)}>
          Hello, world!
        </Modal.Header>
        <div style={{ padding: 24 }}>This is a modal</div>
      </Modal>
    </div>
  )}
</CodeBlock>

<CodeBlock>
  {(value, setValue) => (
    <div>
      <Button themed onClick={() => setValue(true)}>
        {" "}
        Open Themed Modal{" "}
      </Button>
      <Modal themed onClose={() => setValue(false)} active={value}>
        <div>This is a themed Modal.</div>
      </Modal>
    </div>
  )}
</CodeBlock>

## Configuration

<ConfigBlock of={Modal} />

## Examples

<CodeBlock title="With Primary CTA">
  {(value, setValue) => (
    <div>
      <Button onClick={() => setValue(true)}> Open Modal </Button>
      <Modal onClose={() => setValue(false)} active={value}>
        <Modal.Header onClose={() => setValue(false)} withSave>
          Hello, world!
        </Modal.Header>
        <div style={{ padding: 24 }}>This is a modal</div>
      </Modal>
    </div>
  )}
</CodeBlock>

<CodeBlock title="Without Header">
  {(value, setValue) => (
    <div>
      <Button onClick={() => setValue(true)}> Open Modal </Button>
      <Modal onClose={() => setValue(false)} active={value}>
        <div style={{ padding: 24 }}>This is a modal</div>
      </Modal>
    </div>
  )}
</CodeBlock>

<CodeBlock title="Themed Modal with Header and Footer">
  {(value, setValue) => (
    <div>
      <Button themed onClick={() => setValue(true)}>
        {" "}
        Open Themed Modal{" "}
      </Button>
      <Modal
        themed
        onClose={() => setValue(false)}
        active={value}
        header={
          <div style={{ fontWeight: 600, fontSize: "18px" }}>Themed Modal</div>
        }
        footer={
          <div style={{ marginLeft: "auto" }}>
            <Button themed onClick={console.log("Save Button Clicked")}>
              Save
            </Button>
          </div>
        }
      >
        <div>This is a themed modal</div>
      </Modal>
    </div>
  )}
</CodeBlock>