import * as React from "react";

import {
  EditorWithCustomData,
  sampleContentData,
} from "@sc/modules/page/Builder/Builder.stories";
import { boolean, select, text, withKnobs } from "@storybook/addon-knobs";
import { styleData, themeSettings } from "@sc/plugins/webcomponents/v2/theme";

import Button from "@sc/plugins/webcomponents/v2/Button/live";
import { EditorShareButton } from "./component";
import { Section } from "@sc/plugins/webcomponents/v2";
import { ShareButton } from "./live";
import { ShareButtonTypes } from "./types";
import { action } from "@storybook/addon-actions";

import settings from "./settings";

export default {
  title: "Plugins|Web Components/Moderate/Share Button",
  decorators: [withKnobs],
  component: ShareButton,
  subcomponents: { EditorShareButton },
};

const style = {
  BUTTON: {
    style: {
      margin: 10,
      padding: 20,
      border: "none",
      borderRadius: 5,
      width: "100%",
      cursor: "pointer",
      backgroundColor: "#e43b2c",
      boxShadow: `0 1px 5px rgba(0,0,0,0.2)`,
    },
    caption1: {
      fontFamily: "Poppins",
      textShadow: "2px 2px rgb(0,0,0,0.25)",
      fontSize: "22pt",
      fontWeight: "bold",
      color: themeSettings.default.lightTextColor,
      lineHeight: "35px",
      display: "block",
    },
    caption2: {
      color: "white",
      fontSize: "11pt",
    },
  },
};

export const Default: React.FC = () => {
  return (
    <Section
      style={{
        padding: 40,
      }}
    >
      <ShareButton
        shareButtonType={select(
          "Destination",
          ShareButtonTypes,
          ShareButtonTypes.FACEBOOK
        )}
        onClick={action("Share Clicked")}
        onComplete={action("Share Complete")}
        subject={text("Subject", "This is a test!")}
        content={text("Content", "This is a big deal!!")}
        url={text("Share URL", "http://google.com")}
        showShareCount={boolean("Show Share Count", false)}
      >
        {(shareCount) => (
          <Button
            style={{ ...style.BUTTON.style, margin: 0 }}
            hoverStyle={{ backgroundColor: "#FF0000" }}
            caption1="YES! Share this right now!!"
            caption1style={{
              ...style.BUTTON.caption1,
            }}
            caption2={`Thanks to ${shareCount ||
              "all the"} buyers for the Discount!`}
            caption2style={style.BUTTON.caption2}
            onClick={action("Button Click")}
          />
        )}
      </ShareButton>
    </Section>
  );
};

export const InTheEditor: React.FC = () => {
  return (
    <EditorWithCustomData
      content={[
        { id: "CustomField", parent: "u5j1r64m5rf", ...settings.default },
        ...sampleContentData,
      ]}
    />
  );
};