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

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

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

export default {
  title: "Plugins|Web Layouts/Pricing",
};

export const Pricing01: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={PricingLayouts.ONE}>
          <Layout type={PricingLayouts.ONE} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="https://assets.website-files.com/5d4fd160326ec183bf464939/5d4fd160326ec1cd654649c6_Pricing%203.jpg"
        />
      )}
      {boolean("In the Editor", true) && (
        <EditorWithCustomData
          defaultMobileState={mobileStateData.desktop}
          content={buildContentData([settings01.default])}
        />
      )}
    </>
  );
};

export const Pricing02: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={PricingLayouts.TWO}>
          <Layout type={PricingLayouts.TWO} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="https://assets.website-files.com/5d4fd160326ec183bf464939/5d4fd160326ec12c154649c8_Pricing%204.jpg"
        />
      )}
      {boolean("In the Editor", true) && (
        <EditorWithCustomData
          defaultMobileState={mobileStateData.desktop}
          content={buildContentData([settings02.default])}
        />
      )}
    </>
  );
};

export const Pricing03: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={PricingLayouts.THREE}>
          <Layout type={PricingLayouts.THREE} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="https://assets.website-files.com/5d4fd160326ec183bf464939/5d4fd160326ec1ab384649be_Pricing%205.jpg"
        />
      )}
      {boolean("In the Editor", true) && (
        <EditorWithCustomData
          defaultMobileState={mobileStateData.desktop}
          content={buildContentData([settings03.default])}
        />
      )}
    </>
  );
};

export const Pricing04: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={PricingLayouts.FOUR}>
          <Layout type={PricingLayouts.FOUR} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="https://assets.website-files.com/5d4fd160326ec183bf464939/5d4fd160326ec1d1cf4649b4_Pricing%206.jpg"
        />
      )}
      {boolean("In the Editor", true) && (
        <EditorWithCustomData
          defaultMobileState={mobileStateData.desktop}
          content={buildContentData([settings04.default])}
        />
      )}
    </>
  );
};

export const Pricing06: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={PricingLayouts.SIX}>
          <Layout type={PricingLayouts.SIX} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="https://assets.website-files.com/5d4fd160326ec183bf464939/5d4fd160326ec17cd74649a1_Pricing%202.jpg"
        />
      )}
      {boolean("In the Editor", true) && (
        <EditorWithCustomData
          defaultMobileState={mobileStateData.desktop}
          content={buildContentData([settings06.default])}
        />
      )}
    </>
  );
};

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

export const AllPricingTables: 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={PricingLayouts.ONE}>
        <Layout type={PricingLayouts.ONE} data={data} />
      </GRP>
      <GRP title={PricingLayouts.TWO}>
        <Layout type={PricingLayouts.TWO} data={data} />
      </GRP>
      <GRP title={PricingLayouts.THREE}>
        <Layout type={PricingLayouts.THREE} data={data} />
      </GRP>
      <GRP title={PricingLayouts.FOUR}>
        <Layout type={PricingLayouts.FOUR} data={data} />
      </GRP>
      <GRP title={PricingLayouts.SIX}>
        <Layout type={PricingLayouts.SIX} data={data} />
      </GRP>
    </>
  );
};