import React from "react";
import { action } from "@storybook/addon-actions";
import { storiesOf } from "@storybook/react";
import Button, { buttonTypes, buttonSizes } from "@crave/farmblocks-button";

import Footer from "./Footer";

storiesOf("Footer", module)
  .add("without actions", () => (
    <Footer
      helpText="Have questions about account setup?"
      helpLinkText="Get support"
      helpLinkHref="#"
      helpImageSrc="https://crave-whatsgood-sandbox.imgix.net/businesses/32/inventory/8fae5d32-f6d4-47bb-8062-e4e85c47788b.png"
    />
  ))
  .add("with one action", () => (
    <Footer
      helpText="Have questions about account setup?"
      helpLinkText="Get support"
      onHelpLinkClick={action("onHelpLinkClick")}
      actions={[
        <Button onClick={action("onSaveClick")} text="Save" key="save" />,
      ]}
      helpImageSrc="https://crave-whatsgood-sandbox.imgix.net/businesses/32/inventory/8fae5d32-f6d4-47bb-8062-e4e85c47788b.png"
    />
  ))
  .add("with two actions", () => (
    <Footer
      helpText="Have questions about account setup?"
      helpLinkText="Get support"
      onHelpLinkClick={action("onHelpLinkClick")}
      actions={[
        <Button
          onClick={action("onCancelClick")}
          text="Cancel"
          key="cancel"
          size={buttonSizes.MEDIUM}
        />,
        <Button
          onClick={action("onSaveClick")}
          text="Save"
          type={buttonTypes.PRIMARY}
          key="save"
          size={buttonSizes.MEDIUM}
        />,
      ]}
      helpImageSrc="https://crave-whatsgood-sandbox.imgix.net/businesses/32/inventory/8fae5d32-f6d4-47bb-8062-e4e85c47788b.png"
    />
  ))
  .add("without link", () => (
    <Footer
      helpText="Have questions about account setup?"
      actions={[
        <Button onClick={action("onSaveClick")} text="Save" key="save" />,
      ]}
      helpImageSrc="https://crave-whatsgood-sandbox.imgix.net/businesses/32/inventory/8fae5d32-f6d4-47bb-8062-e4e85c47788b.png"
    />
  ))
  .add("without image", () => (
    <Footer
      helpText="Have questions about account setup?"
      helpLinkText="Get support"
      helpLinkHref="#"
      actions={[
        <Button onClick={action("onSaveClick")} text="Save" key="save" />,
      ]}
    />
  ))
  .add("custom font size", () => (
    <Footer
      helpText="Have questions about account setup?"
      helpLinkText="Get support"
      helpLinkHref="#"
      helpImageSrc="https://crave-whatsgood-sandbox.imgix.net/businesses/32/inventory/8fae5d32-f6d4-47bb-8062-e4e85c47788b.png"
      helpFontSize={12}
    />
  ))
  .add("extended style", () => (
    <Footer
      css="
        border-color: orangered;
        .image {
          transform: rotate(-45deg);
        }
        .text {
          text-shadow: 0 0 8px tomato;
        }
        .link {
          border: solid 1px deeppink;
        }
      "
      helpText="Have questions about account setup?"
      helpLinkText="Get support"
      onHelpLinkClick={action("onHelpLinkClick")}
      helpImageSrc="https://crave-whatsgood-sandbox.imgix.net/businesses/32/inventory/8fae5d32-f6d4-47bb-8062-e4e85c47788b.png"
    />
  ));

@@ -138,32 +138,21 @@
 , %7B 
-buttonTypes, buttonSizes
+PrimaryButton
  %7D f
@@ -1173,34 +1173,24 @@
      %3CButton
-%0A         
  onClick=%7Bac
@@ -1207,34 +1207,24 @@
 ncelClick%22)%7D
-%0A         
  text=%22Cance
@@ -1225,26 +1225,16 @@
 %22Cancel%22
-%0A         
  key=%22ca
@@ -1242,52 +1242,8 @@
 cel%22
-%0A          size=%7BbuttonSizes.MEDIUM%7D%0A       
  /%3E,
@@ -1248,24 +1248,31 @@
 %3E,%0A        %3C
+Primary
 Button%0A     
@@ -1344,91 +1344,18 @@
     
-type=%7BbuttonTypes.PRIMARY%7D%0A          key=%22save%22%0A          size=%7BbuttonSizes.MEDIUM%7D
+key=%22save%22
 %0A   

update button