import { ComponentMeta, ComponentStory } from "@storybook/react";
import { Col, Row } from "antd";
import React, { useState } from "react";
import { Button, Drawer } from "../Starship";
import "../Styles/index.scss";

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: "Example/Drawer",
  component: Drawer,
  argTypes: {
    placement: {
      control: {
        type: "select",
        options: ["top", "bottom", "left", "right"],
      },
    },
  },

  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
} as ComponentMeta<typeof Drawer>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof Drawer> = (args) => {
  const [showDrawer, setShowDrawer] = useState(false);
  return (
    <>
      {/* primary button only text */}

      <Row
        gutter={[16, 16]}
        style={{ padding: "16px" }}
        justify={"center"}
        align={"middle"}
      >
        <Col>
          <Button
            type="primary"
            onClick={() => {
              setShowDrawer(true);
            }}
            disabled={showDrawer}
          >
            Click Me
          </Button>
          <Drawer
            closable
            onClose={() => {
              setShowDrawer(false);
            }}
            visible={showDrawer}
            {...args}
          >
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
          </Drawer>
        </Col>
      </Row>
      {/* primary button only text */}
    </>
  );
};

export const StarshipDrawer = Template.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
StarshipDrawer.args = { placement: "bottom", title: "Starship Drawer" };