import { useState } from "react";
import { Meta, Preview, Props, Story } from "@storybook/addon-docs/blocks";
import { ComponentHeading } from "../../storybook-components";
import { WithDrawer, Drawer } from "./Drawer";
import {
  Box,
  Button,
  BUTTON_VARIANT,
  TopBar,
  Text,
  Heading,
  ICON_TYPE,
  Table,
} from "../..";

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

<ComponentHeading
  componentName="Drawer"
  description="Pulls content on and off screen with an animation"
  sourcePath="src/components/Drawer/Drawer.tsx"
/>

```jsx
import { WithDrawer, Drawer } from "@aptible/arrow-ds";
```

The `Drawer` and `WithDrawer` components can be used to pull content on and off screen via the `isOpen` prop. Content passed as `children` to the `WithDrawer` will be displayed to the right and will be pushed over when `isOpen` is true.

When using in conjunction with a table, take note of how the table stretches and collapses. You may need to apply columns widths (or minimum widths) to prevent dramatic fluctuations in the width and height of the full table.

<Preview>
  <Story name="Drawer">
    {() => {
      const [isOpen, setIsOpen] = useState(true);
      return (
        <Box className="page" style={{ height: "500px" }}>
          <WithDrawer
            isOpen={isOpen}
            onClose={() => setIsOpen(false)}
            drawerSlot={
              <Drawer
                headingSlot={<Heading.H4>Drawer Heading</Heading.H4>}
                footerSlot={
                  <div className="w-full text-bodySm">
                    This is the footer content
                  </div>
                }
              >
                <Text className="py-4 px-8 text-bodySm">
                  This is the drawer content
                </Text>
              </Drawer>
            }
            fixedSlotTop={
              <TopBar
                leftSlot={
                  <Button
                    icon={ICON_TYPE.FILTER}
                    variant={BUTTON_VARIANT.SECONDARY}
                    onClick={() => setIsOpen(!isOpen)}
                  >
                    Filter Results
                  </Button>
                }
                rightSlot="top content right"
              />
            }
            fixedSlotBottom={
              <TopBar
                leftSlot="bottom content left"
                rightSlot="bottom content right"
              />
            }
            scrollableSlot={
              <Table stickyColumn>
                <Table.Head>
                  <Table.Row>
                    <Table.HeaderCell sortable={false} minColumnWidth="200px">
                      Name
                    </Table.HeaderCell>
                    <Table.HeaderCell sortable={false} minColumnWidth="200px">
                      Column 2
                    </Table.HeaderCell>
                    <Table.HeaderCell sortable={false} minColumnWidth="200px">
                      Column 3
                    </Table.HeaderCell>
                    <Table.HeaderCell sortable={false} minColumnWidth="200px">
                      Column 4
                    </Table.HeaderCell>
                    <Table.HeaderCell sortable={false} minColumnWidth="200px">
                      Column 5
                    </Table.HeaderCell>
                    <Table.HeaderCell sortable={false} minColumnWidth="200px">
                      Column 6
                    </Table.HeaderCell>
                  </Table.Row>
                </Table.Head>
                <Table.Body>
                  <Table.Row>
                    <Table.Cell>Lucille Bluth</Table.Cell>
                    <Table.Cell>table data</Table.Cell>
                    <Table.Cell>table data</Table.Cell>
                    <Table.Cell>table data</Table.Cell>
                    <Table.Cell>table data</Table.Cell>
                    <Table.Cell>table data</Table.Cell>
                  </Table.Row>
                  <Table.Row>
                    <Table.Cell>Tobias Fünke</Table.Cell>
                    <Table.Cell>table data</Table.Cell>
                    <Table.Cell>table data</Table.Cell>
                    <Table.Cell>table data</Table.Cell>
                    <Table.Cell>table data</Table.Cell>
                    <Table.Cell>table data</Table.Cell>
                  </Table.Row>
                </Table.Body>
              </Table>
            }
          />
        </Box>
      );
    }}
  </Story>
</Preview>

## Props

### `WithDrawer`

<Props of={WithDrawer} />

### `Drawer`

These are the custom props that extend [`BoxProps`](/?path=/docs/components-box--box#all-props).

<Props of={Drawer} />

## Demos

### Drawer on the right

<Preview>
  <Story name="DrawerRight">
    {() => {
      const [isOpen, setIsOpen] = useState(true);
      return (
        <Box className="page" style={{ height: "300px" }}>
          <WithDrawer
            isOpen={isOpen}
            onClose={() => setIsOpen(false)}
            drawerSide="right"
            drawerSlot={
              <Drawer
                headingSlot={<Heading.H4>Drawer Heading</Heading.H4>}
                footerSlot={
                  <div className="w-full text-bodySm">
                    This is the footer content
                  </div>
                }
              >
                <Text className="py-4 px-8 text-bodySm">
                  This is the drawer content
                </Text>
              </Drawer>
            }
            fixedSlotTop={
              <TopBar
                leftSlot="top left content"
                rightSlot={
                  <Button
                    variant={BUTTON_VARIANT.SECONDARY}
                    onClick={() => setIsOpen(!isOpen)}
                  >
                    Toggle the Drawer
                  </Button>
                }
              />
            }
            fixedSlotBottom={
              <TopBar
                leftSlot="bottom content left"
                rightSlot="bottom content right"
              />
            }
            scrollableSlot={
              <Box className="p-20 w-screen bg-gray-200">
                [ scrollable content ]
              </Box>
            }
          />
        </Box>
      );
    }}
  </Story>
</Preview>

### No Animation Left

<Preview>
  <Story name="DrawerNoAnimationLeft">
    {() => {
      const [isOpen, setIsOpen] = useState(true);
      return (
        <Box className="page" style={{ height: "300px" }}>
          <WithDrawer
            noAnimation
            isOpen={isOpen}
            onClose={() => setIsOpen(false)}
            drawerSlot={
              <Drawer
                headingSlot={<Heading.H4>Drawer Heading</Heading.H4>}
                footerSlot={
                  <div className="w-full text-bodySm">
                    This is the footer content
                  </div>
                }
              >
                <Text className="py-4 px-8 text-bodySm">
                  This is the drawer content
                </Text>
              </Drawer>
            }
            fixedSlotTop={
              <TopBar
                leftSlot={
                  <Button
                    variant={BUTTON_VARIANT.SECONDARY}
                    onClick={() => setIsOpen(!isOpen)}
                  >
                    Toggle the Drawer
                  </Button>
                }
                rightSlot="top right content"
              />
            }
            fixedSlotBottom={
              <TopBar
                leftSlot="bottom content left"
                rightSlot="bottom content right"
              />
            }
            scrollableSlot={
              <Box className="p-20 w-screen bg-gray-200">
                [ scrollable content ]
              </Box>
            }
          />
        </Box>
      );
    }}
  </Story>
</Preview>

### No Animation Right

<Preview>
  <Story name="DrawerNoAnimationRight">
    {() => {
      const [isOpen, setIsOpen] = useState(true);
      return (
        <Box className="page" style={{ height: "300px" }}>
          <WithDrawer
            noAnimation
            isOpen={isOpen}
            onClose={() => setIsOpen(false)}
            drawerSide="right"
            drawerSlot={
              <Drawer
                headingSlot={<Heading.H4>Drawer Heading</Heading.H4>}
                footerSlot={
                  <div className="w-full text-bodySm">
                    This is the footer content
                  </div>
                }
              >
                <Text className="py-4 px-8 text-bodySm">
                  This is the drawer content
                </Text>
              </Drawer>
            }
            fixedSlotTop={
              <TopBar
                leftSlot="top left content"
                rightSlot={
                  <Button
                    variant={BUTTON_VARIANT.SECONDARY}
                    onClick={() => setIsOpen(!isOpen)}
                  >
                    Toggle the Drawer
                  </Button>
                }
              />
            }
            fixedSlotBottom={
              <TopBar
                leftSlot="bottom content left"
                rightSlot="bottom content right"
              />
            }
            scrollableSlot={
              <Box className="p-20 w-screen bg-gray-200">
                [ scrollable content ]
              </Box>
            }
          />
        </Box>
      );
    }}
  </Story>
</Preview>