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

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

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof Table> = (args) => {
  const columns = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
      sorter: (a: any, b: any) => a.age - b.age,
      width: "200px",
    },
    {
      title: "Age",
      dataIndex: "age",
      key: "age",
      sorter: (a: any, b: any) => a.age - b.age,
      width: "200px",
    },
    {
      title: "Address",
      dataIndex: "address",
      key: "address",
      width: "200px",
      fixed: "right" as const,
    },
  ];

  const hardCodedData = [
    {
      key: "1",
      name: "Mike",
      age: 32,
      address: "10 Downing Street",
      width: "100px",
    },
    {
      key: "2",
      name: "John",
      age: 42,
      address: "10 Downing Street",
      width: "100px",
    },
    {
      key: "2",
      name: "John",
      age: 42,
      address: "10 Downing Street",
    },
    {
      key: "2",
      name: "John",
      age: 42,
      address: "10 Downing Street",
      width: "100px",
    },
    {
      key: "2",
      name: "John",
      age: 42,
      address: "10 Downing Street",
    },
    {
      key: "2",
      name: "John",
      age: 42,
      address: "10 Downing Street",
      width: "100px",
    },
  ];
  return (
    <>
      <Row
        gutter={[16, 16]}
        style={{ padding: "16px" }}
        justify={"center"}
        align={"middle"}
      >
        <Col>
          <div style={{ height: "70vh" }}>
            {/* height in vh for testing flex height of tabke */}
            <Table
              {...args}
              flexHeight={true}
              pagination={false}
              columns={columns}
              dataSource={hardCodedData}
              horizontalScrollConfig={{ enable: true, threshold: 20 }}
            ></Table>
          </div>

          {/* made custom pagination component to support server side pagination */}
          <Pagination total={50} pageSize={10} hideOnSinglePage={true} />
        </Col>
      </Row>
      {/* primary button only text */}
    </>
  );
};

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