import * as React from "react";
import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";

import Layout from "../Layout";
import { GuaranteeLayouts } from "./types";
import theme from "../theme";

import {
  EditorWithCustomData,
  buildContentData,
  mobileStateData,
} from "@sc/modules/page/Builder/Builder.stories";

import { settings01, settings02, settings03 } from "./";

export default {
  title: "Plugins|Web Layouts/Guarantees",
  decorators: [withKnobs],
};

interface grpProps {
  children: JSX.Element | JSX.Element[];
  title: string;
}

const GRP: React.FC<grpProps> = ({ children, title }) => {
  return (
    <div
      style={{
        border: "1px solid white",
        // padding: 50,
        margin: 10,
        backgroundColor: theme.backgroundColor,
      }}
    >
      <p
        style={{
          color: "white",
          fontWeight: ("bold" as "bold") as "bold",
          fontFamily: theme.fontFamily,
          padding: "5px 20px",
        }}
      >
        {title}:
      </p>
      <div style={{ border: "1px solid rgb(255,255,255,0.1)" }}>{children}</div>
    </div>
  );
};

export const Guarantee01: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={GuaranteeLayouts.ONE}>
          <Layout type={GuaranteeLayouts.ONE} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP title="Inspiration">
          <img
            style={{ width: "100%" }}
            src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/placeholders/Guarantee/01.png"
          />
        </GRP>
      )}
      {boolean("In the Editor", true) && (
        <EditorWithCustomData
          defaultMobileState={mobileStateData.desktop}
          content={buildContentData([settings01.default])}
        />
      )}
    </>
  );
};

export const Guarantee02: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={GuaranteeLayouts.TWO}>
          <Layout type={GuaranteeLayouts.TWO} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP title="Inspiration">
          <img
            style={{ width: "100%" }}
            src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/placeholders/Guarantee/02.png"
          />
        </GRP>
      )}
      {boolean("In the Editor", true) && (
        <EditorWithCustomData
          defaultMobileState={mobileStateData.desktop}
          content={buildContentData([settings02.default])}
        />
      )}
    </>
  );
};

export const Guarantee03: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={GuaranteeLayouts.THREE}>
          <Layout type={GuaranteeLayouts.THREE} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP title="Inspiration">
          <img
            style={{ width: "100%" }}
            src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/placeholders/Guarantee/03.png"
          />
        </GRP>
      )}
      {boolean("In the Editor", true) && (
        <EditorWithCustomData
          defaultMobileState={mobileStateData.desktop}
          content={buildContentData([settings03.default])}
        />
      )}
    </>
  );
};

export const InTheEditor: React.FC = () => {
  return (
    <EditorWithCustomData
      defaultMobileState={mobileStateData.desktop}
      content={buildContentData([
        settings01.default,
        settings02.default,
        settings03.default,
      ])}
    />
  );
};

export const AllGuarantees: React.FC = () => {
  const data = {
    section: {
      pageMargin: number("Page Margin", 980, {
        range: true,
        min: 500,
        max: 2000,
      }),
    },
    main_headline: {
      html: text("Main Headline Text", "I have overrided the text"),
      render: boolean("Show Main Headline", true),
    },
    sub_headline: {
      render: boolean("Show Sub Headline", true),
    },
    hero_video: {
      render: boolean("Show Hero Video", true),
    },
    cta_button: {
      render: boolean("Show Button (If Present)", true),
    },
  };

  return (
    <>
      <GRP title={GuaranteeLayouts.ONE}>
        <Layout type={GuaranteeLayouts.ONE} data={data} />
      </GRP>
      <GRP title={GuaranteeLayouts.TWO}>
        <Layout type={GuaranteeLayouts.TWO} data={data} />
      </GRP>
      <GRP title={GuaranteeLayouts.THREE}>
        <Layout type={GuaranteeLayouts.THREE} data={data} />
      </GRP>
    </>
  );
};