import { Story, Meta } from "@storybook/react";

import Table, { TableProps } from "./Table";
import Button from "../Button";
import TableHead from "../TableHead";
import TableRow from "../TableRow";
import TableHeadCell from "../TableHeadCell";
import TableBody from "../TableBody";
import TableDataCell from "../TableDataCell";

import Block from "../Block/Block";

export default {
  title: "Component/Atoms/Table",
  component: Table,
  parameters: {
    component: Table,
    previewTabs: {
      canvas: {
        hidden: true,
      },
    },
    viewMode: "docs",
  },
} as Meta;

interface ExampleProps {
  children?: React.ReactNode;
  classes: string;
}

const Template: Story<TableProps> = (args) => <Table {...args}></Table>;

const Example: Story<ExampleProps> = (args) => {
  const classes = args.classes;
  return classes ? (
    <Block className={args.classes}>{args.children}</Block>
  ) : (
    <>{args.children}</>
  );
};

export const Properties = Template.bind({});
Properties.args = {};

export const StyledTable = Example.bind({});
StyledTable.args = {
  children: (
    <Table>
      <TableHead>
        <TableRow>
          <TableHeadCell>Name</TableHeadCell>
          <TableHeadCell>TITLE</TableHeadCell>
          <TableHeadCell>EMAIL</TableHeadCell>
          <TableHeadCell colSpan={2}>ROLE</TableHeadCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableDataCell>Jane Cooper</TableDataCell>
          <TableDataCell>Regional Paradigm Technician </TableDataCell>
          <TableDataCell>jane.cooper@example.com </TableDataCell>
          <TableDataCell>Admin</TableDataCell>
          <TableDataCell>
            <Button variation="default" className="py-1 leading-6">
              Edit
            </Button>
          </TableDataCell>
        </TableRow>
        <TableRow>
          <TableDataCell>Jane Cooper</TableDataCell>
          <TableDataCell>Regional Paradigm Technician </TableDataCell>
          <TableDataCell>jane.cooper@example.com </TableDataCell>
          <TableDataCell>Admin</TableDataCell>
          <TableDataCell>
            <Button variation="default" className="py-1 leading-6">
              Edit
            </Button>
          </TableDataCell>
        </TableRow>
        <TableRow>
          <TableDataCell>Jane Cooper</TableDataCell>
          <TableDataCell>Regional Paradigm Technician </TableDataCell>
          <TableDataCell>jane.cooper@example.com </TableDataCell>
          <TableDataCell>Admin</TableDataCell>
          <TableDataCell>
            <Button variation="default" className="py-1 leading-6">
              Edit
            </Button>
          </TableDataCell>
        </TableRow>
        <TableRow>
          <TableDataCell>Jane Cooper</TableDataCell>
          <TableDataCell>Regional Paradigm Technician </TableDataCell>
          <TableDataCell>jane.cooper@example.com </TableDataCell>
          <TableDataCell>Admin</TableDataCell>
          <TableDataCell>
            <Button variation="default" className="py-1 leading-6">
              Edit
            </Button>
          </TableDataCell>
        </TableRow>
        <TableRow>
          <TableDataCell>Jane Cooper</TableDataCell>
          <TableDataCell>Regional Paradigm Technician </TableDataCell>
          <TableDataCell>jane.cooper@example.com </TableDataCell>
          <TableDataCell>Admin</TableDataCell>
          <TableDataCell>
            <Button variation="default" className="py-1 leading-6">
              Edit
            </Button>
          </TableDataCell>
        </TableRow>
        <TableRow>
          <TableDataCell>Jane Cooper</TableDataCell>
          <TableDataCell>Regional Paradigm Technician </TableDataCell>
          <TableDataCell>jane.cooper@example.com </TableDataCell>
          <TableDataCell>Admin</TableDataCell>
          <TableDataCell>
            <Button variation="default" className="py-1 leading-6">
              Edit
            </Button>
          </TableDataCell>
        </TableRow>
      </TableBody>
    </Table>
  ),
  classes: "shadow overflow-hidden border-b border-gray-200 sm:rounded-lg",
};
