import * as React from "react";
import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import { withInfo } from "@storybook/addon-info";
import { host } from "storybook-host";

import DataCard from "./DataCard";

const ReadMe = require("./README.md");

const options = {
  info: {
    header: false,
    text: `
# DataCard
The default card to use to display a record in the DisplayItems component    
    `
  },
  notes: ReadMe
};

storiesOf("Components|DisplayItems/Components/DataCard", module)
  .addDecorator(withInfo)
  .addDecorator(
    host({
      title: "DataCard Component",
      align: "center bottom",
      height: "80%",
      width: 800,
      border: "1px solid #DDD"
    })
  )
  .add(
    "Default State",
    () => (
  <DataCard
    icon=""
    image=""
    component={<div />}
    tags=""
    label=""
    canEditLabel=""
    actions=""
    showActionControls=""
    onClick=""
    onDoubleClick=""
    onActionSelect=""
    onDataChange=""
  >
        <span onClick={() => action("Clicked")}>This is an action!</span>
      </DataCard>
    ),
    options
  );