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

# Drawer

> 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 Drawer </Button>
      <Drawer onClose={() => setValue(false)} active={value}>
        <Drawer.Header onClose={() => setValue(false)}>Hello, world!</Drawer.Header>
        <div style={{ padding: 24 }}>This is a modal</div>
      </Drawer>
    </div>
  )}
</CodeBlock>

# Themed Drawer

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

# Themed Drawer with back button

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

## Configuration

<ConfigBlock of={Drawer} />

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

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

 <CodeBlock title='Type: Custom OffSet'>
  {(value, setValue) => (
    <div>
      <Button onClick={() => setValue(true)}> Open Drawer </Button>
      <Drawer onClose={() => setValue(false)} active={value} offset='50px' >
        <Drawer.Header onClose={() => setValue(false)}>Hello, world!</Drawer.Header>
        <div style={{ padding: 24 }}>This is a modal</div>
      </Drawer>
    </div>
  )}
</CodeBlock>

 <CodeBlock title='Type: Custom Z-Index'>
  {(value, setValue) => (
    <div>
      <Button onClick={() => setValue(true)}> Open Drawer </Button>
      <Drawer onClose={() => setValue(false)} active={value} zIndex='10' >
        <Drawer.Header onClose={() => setValue(false)}>Hello, world!</Drawer.Header>
        <div style={{ padding: 24 }}>This is a modal</div>
      </Drawer>
    </div>
  )}
</CodeBlock>

 <CodeBlock title='Type: Custom Width'>
  {(value, setValue) => (
    <div>
      <Button onClick={() => setValue(true)}> Open Drawer </Button>
      <Drawer onClose={() => setValue(false)} active={value} width='450px' >
        <Drawer.Header onClose={() => setValue(false)}>Hello, world!</Drawer.Header>
        <div style={{ padding: 24 }}>This is a modal</div>
      </Drawer>
    </div>
  )}
</CodeBlock>

 <CodeBlock title='Type: Positon Left'>
  {(value, setValue) => (
    <div>
      <Button onClick={() => setValue(true)}> Open Drawer </Button>
      <Drawer onClose={() => setValue(false)} active={value} position='LEFT'>
        <Drawer.Header onClose={() => setValue(false)}>Hello, world!</Drawer.Header>
        <div style={{ padding: 24 }}>This is a modal</div>
      </Drawer>
    </div>
  )}
</CodeBlock>