import React from "react";
import { storiesOf } from "@storybook/react";
import Story from "../../storybook-components/Story";
import { SimpleTable } from "./SimpleTable";
import { Truncate } from "../Truncate";

const stories = storiesOf("Components/Data/Simple Table", module);

const mappingsData = [
  {
    id: "A.12.4.3",
    title: "Administrator and operator logs",
    desc:
      "System administrator and system operator activities shall be reviewed lorem ipsum dolor amet ramps irony synth tattooed flexitarian small batch. Slow-carb wolf tofu hell of organic occupy umami before they sold out literally.",
  },
  {
    id: "A.18.2.1",
    title: "Independent review of information security",
    desc:
      "The organization’s approach to managing information security charcoal polaroid before they sold out cred, disrupt shabby chic mumblecore jean shorts marfa snackwave. Wayfarers PBR&B bespoke, kinfolk plaid fashion axe actually.",
  },
  {
    id: "9.3",
    title: "Management review",
    desc:
      "Top management shall review the organization’s information prism cold-pressed, hell of poutine bicycle rights PBR&B lumbersexual brunch 8-bit raclette vinyl ethical dreamcatcher banh mi. Pitchfork cronut lo-fi street art.",
  },
];

const nameData = [
  {
    name: "Chas Ballew",
    bio:
      "Before Aptible, Chas served on active duty in the Army for 4 years as a lawyer at the Pentagon, which is where he first learned regulatory law. Prior to that, Chas ran two small dev shops for beer money in high school and college. His dog's name is Dilla.",
  },
  {
    name: "Frank Macreery",
    bio:
      "Prior to Aptible, Frank led engineering teams at Give Real, XGraph (acquired by Clearspring / AddThis), and Artsy. He holds a B.S.E. in Computer Science from Princeton University.",
  },
];

stories
  .add("No Head", () => (
    <Story title="SimpleTable">
      <SimpleTable>
        <SimpleTable.Caption>ISO 27001:2013</SimpleTable.Caption>
        <SimpleTable.Body>
          {mappingsData.map((row) => {
            return (
              <SimpleTable.Row key={row.id}>
                <SimpleTable.Cell className="font-medium text-gray-600">
                  {row.id}
                </SimpleTable.Cell>
                <SimpleTable.Cell className="font-medium text-gray-800">
                  {row.title}
                </SimpleTable.Cell>
                <SimpleTable.Cell>
                  <Truncate>{row.desc}</Truncate>
                </SimpleTable.Cell>
              </SimpleTable.Row>
            );
          })}
        </SimpleTable.Body>
      </SimpleTable>
    </Story>
  ))
  .add("With Head and wrapping text", () => (
    <Story title="SimpleTable">
      <SimpleTable>
        <SimpleTable.Caption>Aptible Chiefs</SimpleTable.Caption>
        <SimpleTable.Head>
          <SimpleTable.Row>
            <SimpleTable.HeaderCell>Name</SimpleTable.HeaderCell>
            <SimpleTable.HeaderCell>Bio</SimpleTable.HeaderCell>
          </SimpleTable.Row>
        </SimpleTable.Head>
        <SimpleTable.Body>
          {nameData.map((row) => {
            return (
              <SimpleTable.Row key={row.name}>
                <SimpleTable.Cell className="font-medium">
                  {row.name}
                </SimpleTable.Cell>
                <SimpleTable.Cell wrapText>{row.bio}</SimpleTable.Cell>
              </SimpleTable.Row>
            );
          })}
        </SimpleTable.Body>
      </SimpleTable>
    </Story>
  ));