import {
  Story,
  Preview,
  Meta,
  SourceState,
} from "@storybook/addon-docs/blocks";
import { PRODUCT_ID } from "../types";
import { Appbar } from "../components/Appbar";
import { Box } from "../components/Box";
import { Button, BUTTON_VARIANT } from "../components/Button";
import { Frame } from "../components/Frame";
import { ICON_TYPE } from "../components/Icon";
import { Pagination } from "../components/Pagination";
import { ScrollPane } from "../components/ScrollPane";
import { Table } from "../components/Table";
import { TopBar } from "../components/TopBar";

<Meta title="Templates/Index" />

export const tabs = ["Dashboard", "Assets", "ISMS", "Tickets"];

export const columns = [
  {
    name: "Name",
    width: 300,
  },
  {
    name: "Asset",
    width: 200,
  },
  {
    name: "Due On",
    width: 300,
  },
  {
    name: "Assignee",
    width: 200,
  },
];

export const tickets = [
  {
    id: "523c8910-e9e2-486b-9453-cd5c52efc4f7",
    name: "Ea culpa anim",
    asset: "Aliquip",
    dueOn: "May 27, 2020 at 3:33 PM",
    assignee: "Macias Morales",
  },
  {
    id: "9e1f0eb6-707f-40a8-a5b2-b932bfdf7fd7",
    name: "Sint culpa dolor",
    asset: "Proident",
    dueOn: "Oct 30, 2020 7:26 AM",
    assignee: "Carol Cherry",
  },
  {
    id: "718f6d6f-df59-4821-a18d-7030250a10c9",
    name: "Reprehenderit nulla eiusmod",
    asset: "Cupidatat",
    dueOn: "Jun 28, 2020 3:22 PM",
    assignee: "Adams Patel",
  },
  {
    id: "038b5005-47e5-4b8a-854c-3091b7383c43",
    name: "Dolor id duis",
    asset: "Nulla",
    dueOn: "Apr 28, 2020 9:39 PM",
    assignee: "Guzman Ochoa",
  },
  {
    id: "1d50f317-ae80-4213-9f05-e69319512fbc",
    name: "Nostrud non eu",
    asset: "Sint",
    dueOn: "Jul 17, 2020 11:48 PM",
    assignee: "Osborn Garrison",
  },
];

# Index template

The index template accounts for the majority of the pages within the app. It’s
used to display a list of records or properties within a table.

<Preview withSource={SourceState.OPEN}>
  <Story name="Index template">
    <Frame>
      <Frame.Area name="appbar">
        <Appbar
          currentProduct={PRODUCT_ID.COMPLY}
          nav={
            <Appbar.Tabs>
              {tabs.map((tab) => (
                <Appbar.Tab
                  key={tab}
                  href={`/${tab.toLowerCase()}`}
                  active={tab === "Tickets"}
                >
                  {tab}
                </Appbar.Tab>
              ))}
            </Appbar.Tabs>
          }
        />
      </Frame.Area>
      <Frame.Area name="topbar">
        <TopBar
          leftSlot={
            <TopBar.SubNav>
              <TopBar.SubNavItem href="/" isActive>
                Tickets
              </TopBar.SubNavItem>
              <TopBar.SubNavItem href="/">Ticket Templates</TopBar.SubNavItem>
            </TopBar.SubNav>
          }
        />
        <TopBar
          leftSlot={
            <Button.Group>
              <Button
                variant={BUTTON_VARIANT.SECONDARY}
                icon={ICON_TYPE.FILTER}
              >
                Filter Results
              </Button>
            </Button.Group>
          }
          rightSlot={
            <Button.Group>
              <Button variant={BUTTON_VARIANT.SECONDARY}>Export</Button>
              <Button>Create Ticket</Button>
            </Button.Group>
          }
        />
      </Frame.Area>
      <Frame.Area name="main">
        <ScrollPane>
          <Table affixHeader>
            <Table.Head>
              <Table.Row>
                {columns.map((column) => (
                  <Table.HeaderCell
                    key={column.name}
                    minColumnWidth={`${column.width}px`}
                  >
                    {column.name}
                  </Table.HeaderCell>
                ))}
              </Table.Row>
            </Table.Head>
            <Table.Body>
              {new Array(10).fill(null).map(() => (
                <>
                  {tickets.map((ticket) => (
                    <Table.Row key={ticket.id}>
                      <Table.Cell>{ticket.name}</Table.Cell>
                      <Table.Cell>{ticket.asset}</Table.Cell>
                      <Table.Cell>{ticket.dueOn}</Table.Cell>
                      <Table.Cell>{ticket.assignee}</Table.Cell>
                    </Table.Row>
                  ))}
                </>
              ))}
            </Table.Body>
          </Table>
          <Box className="p-6 sticky left-0 max-w-screen">
            <Pagination
              currentPageNumber={1}
              itemsPerPage={50}
              totalItems={200}
              onPageChange={() => console.log("onPageChange")}
            />
          </Box>
        </ScrollPane>
      </Frame.Area>
    </Frame>
  </Story>
</Preview>