/**
 * TEAM: frontend_infra
 * @flow
 */

import * as React from "react";

import {storiesOf} from "@storybook/react";
import {withKnobs, select} from "@storybook/addon-knobs";
import sections from "../sections";
import Drawer, {DRAWER_WIDTHS} from "../../Drawer";
import Button from "../../button/Button";

const drawerWidthOptions = {};

Object.keys(DRAWER_WIDTHS).forEach(key => {
  drawerWidthOptions[key] = key;
});

// $FlowFixMe[invalid-export]
const stories = storiesOf(`${sections.dataDisplay}/Drawer`, module);
stories.addDecorator(withKnobs);
stories.add("basic usage", () => {
  const [isOpen, setIsOpen] = React.useState(true);

  return (
    <div>
      <Button onClick={() => setIsOpen(!isOpen)}>Toggle Drawer</Button>
      <Drawer
        isOpen={isOpen}
        title="Drawer"
        navOffset={0}
        onClose={() => {
          setIsOpen(false);
        }}
        width={select("Width", drawerWidthOptions, "s")}
      />
    </div>
  );
});