import { ComponentMeta, ComponentStory } from "@storybook/react";
import { Col, Row } from "antd";
import React, { useState } from "react";
import { Button, Modal } 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/Modal",
  component: Modal,

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

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

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

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