import { ComponentMeta, ComponentStory } from "@storybook/react";
import { Col, Row } from "antd";
import React from "react";
import { Dropdown, Menu } from "../Starship";
import "../Styles/index.scss";
import { ReactComponent as Down } from "../Assets/Down.svg";

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
// export default {
//     title: "Example/Dropdown",
//     component: Dropdown,
//     // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
// } as ComponentMeta<typeof Dropdown>;

export default {
  title: "Example/Dropdown",
  component: Dropdown,

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

const menu = (
  <Menu onClick={({ key }) => console.log(key)} selectedKeys={["1st"]}>
    <Menu.Item key="1st">TTF</Menu.Item>
    <Menu.Item key="2nd">OXG</Menu.Item>
    <Menu.Item key="3rd">PDR</Menu.Item>
  </Menu>
);

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof Dropdown> = (args) => {
  return (
    <>
      {/* primary button only text */}

      <Row
        gutter={[16, 16]}
        style={{ padding: "16px" }}
        justify={"center"}
        align={"middle"}
      >
        <Col>
          <Dropdown
            icon={<Down />}
            placement="bottomCenter"
            styleType="secondary"
            // visible={true}
            overlay={menu}
          >
            Time in Force
          </Dropdown>
        </Col>
        <Col>
          <Dropdown
            icon={<Down />}
            placement="bottomCenter"
            // visible={true}
            overlay={menu}
          >
            Time in Force
          </Dropdown>
        </Col>
      </Row>
      {/* primary button only text */}
    </>
  );
};

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