import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs/blocks";
import { useArgs, updateArgs } from "@storybook/client-api";
import {
  Drawer,
  FlexRow,
  StyledBox,
  FlexColumn
} from "foundations/components/layout";
import { Icon, Icons } from "foundations/components/presentation";

<Meta title="Basic Layout/Drawer" component={Drawer} />

# Drawer

#### Animated layout component to display full-height edge panels.

<br />
<br />

## Interactive props

export const Template = args => {
  const [{ open }, updateArgs] = useArgs();
  const toggleOpen = () => updateArgs({ open: !open });
  return (
    <FlexRow bg="#eee" height="300px" overflow="hidden">
      <FlexColumn order={args.edge === "left" ? 1 : 3} height="100%">
        <Drawer {...args}>{args.children}</Drawer>
      </FlexColumn>
      <FlexColumn flexGrow="1" order="2">
        <StyledBox position="absolute" left="50%" top="50%">
          <button onClick={toggleOpen} style={{ transform: "translate(-50%)" }}>
            Toggle Drawer
          </button>
        </StyledBox>
      </FlexColumn>
    </FlexRow>
  );
};

<Canvas>
  <Story
    name="Default"
    args={{ open: false, children: "This is Drawer content" }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Default" />

## Usage examples

```jsx
let isOpen = false;
const toggleOpen = () => {
  isOpen = !isOpen;
};

return (
  <FlexRow bg="#eee" height="300px" overflow="hidden">
    <Drawer open={isOpen}>This is Drawer content"</Drawer>
    <FlexColumn flexGrow="1">
      <StyledBox position="absolute" left="50%" top="50%">
        <button onClick={toggleOpen} style={{ transform: "translate(-50%)" }}>
          Toggle Drawer
        </button>
      </StyledBox>
    </FlexColumn>
  </FlexRow>
);
```
