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

import Layout from "../Layout";
import { FormLayouts } from "./types";

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

import {
  settings01,
  settings02,
  settings03,
  settings04,
  settings05,
  settings06,
  settings07,
  settings08,
  settings09,
  settings10,
  settings11,
  settings12,
  settings13,
  settings14,
  settings15,
  settings16,
  settings17,
  settings18,
  settings19,
  settings20,
  settings21,
} from "./";

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

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

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

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

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

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

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

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

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

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

export const Form10: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={FormLayouts.TEN}>
          <Layout type={FormLayouts.TEN} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/placeholders/Forms/10.png"
        />
      )}
      {boolean("In the Editor", true) && (
        <EditorWithCustomData
          defaultMobileState={mobileStateData.desktop}
          content={buildContentData([settings10.default])}
        />
      )}
    </>
  );
};

export const Form11: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={FormLayouts.ELEVEN}>
          <Layout type={FormLayouts.ELEVEN} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/placeholders/Forms/11.png"
        />
      )}
      {boolean("In the Editor", true) && (
        <EditorWithCustomData
          defaultMobileState={mobileStateData.desktop}
          content={buildContentData([settings11.default])}
        />
      )}
    </>
  );
};

export const Form12: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={FormLayouts.TWELVE}>
          <Layout type={FormLayouts.TWELVE} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/placeholders/Forms/12.png"
        />
      )}
      {boolean("In the Editor", true) && (
        <EditorWithCustomData
          defaultMobileState={mobileStateData.desktop}
          content={buildContentData([settings12.default])}
        />
      )}
    </>
  );
};

export const Form13: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={FormLayouts.THIRTEEN}>
          <Layout type={FormLayouts.THIRTEEN} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/placeholders/Forms/13.png"
        />
      )}
      {boolean("In the Editor", true) && (
        <EditorWithCustomData
          defaultMobileState={mobileStateData.desktop}
          content={buildContentData([settings13.default])}
        />
      )}
    </>
  );
};

export const Form14: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={FormLayouts.FOURTEEN}>
          <Layout type={FormLayouts.FOURTEEN} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/placeholders/Forms/14.png"
        />
      )}
      {boolean("In the Editor", true) && (
        <EditorWithCustomData
          defaultMobileState={mobileStateData.desktop}
          content={buildContentData([settings14.default])}
        />
      )}
    </>
  );
};

export const Form15: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={FormLayouts.FIFTEEN}>
          <Layout type={FormLayouts.FIFTEEN} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/placeholders/Forms/15.png"
        />
      )}
      {boolean("In the Editor", true) && (
        <EditorWithCustomData
          defaultMobileState={mobileStateData.desktop}
          content={buildContentData([settings15.default])}
        />
      )}
    </>
  );
};

export const Form17: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={FormLayouts.SEVENTEEN}>
          <Layout type={FormLayouts.SEVENTEEN} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/placeholders/Forms/17.png"
        />
      )}
      {boolean("In the Editor", true) && (
        <EditorWithCustomData
          defaultMobileState={mobileStateData.desktop}
          content={buildContentData([settings17.default])}
        />
      )}
    </>
  );
};

export const Form18: React.FC = () => {
  return (
    <>
      {/* <GRP title={FormLayouts.EIGHTEEN}>
        <Layout type={FormLayouts.EIGHTEEN} />
      </GRP> */}
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/placeholders/Forms/18.png"
        />
      )}
      {/* {boolean("In the Editor", true) && (
        <EditorWithCustomData
          defaultMobileState={mobileStateData.desktop}
          content={buildContentData([settings18.default])}
        />
      )} */}
    </>
  );
};

export const Form19: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={FormLayouts.NINETEEN}>
          <Layout type={FormLayouts.NINETEEN} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/placeholders/Forms/19.png"
        />
      )}
      {boolean("In the Editor", true) && (
        <EditorWithCustomData
          defaultMobileState={mobileStateData.desktop}
          content={buildContentData([settings19.default])}
        />
      )}
    </>
  );
};

export const Form20: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={FormLayouts.TWENTY}>
          <Layout type={FormLayouts.TWENTY} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/placeholders/Forms/20.png"
        />
      )}
      {boolean("In the Editor", true) && (
        <EditorWithCustomData
          defaultMobileState={mobileStateData.desktop}
          content={buildContentData([settings20.default])}
        />
      )}
    </>
  );
};

export const Form21: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={FormLayouts.TWENTYONE}>
          <Layout type={FormLayouts.TWENTYONE} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/placeholders/Forms/21.png"
        />
      )}
      {boolean("In the Editor", true) && (
        <EditorWithCustomData
          defaultMobileState={mobileStateData.desktop}
          content={buildContentData([settings21.default])}
        />
      )}
    </>
  );
};

export const InTheEditor: React.FC = () => {
  return (
    <EditorWithCustomData
      defaultMobileState={mobileStateData.desktop}
      content={buildContentData([
        settings01.default,
        settings02.default,
        settings03.default,
        settings04.default,
        settings05.default,
        settings06.default,
        settings07.default,
        settings08.default,
        settings09.default,
        settings10.default,
        settings11.default,
        settings12.default,
        settings13.default,
        settings14.default,
        settings15.default,
        settings16.default,
        settings17.default,
        settings18.default,
        settings19.default,
        settings20.default,
        settings21.default,
      ])}
    />
  );
};

export const All: 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 (
    <div>
      <GRP title={FormLayouts.ONE}>
        <Layout type={FormLayouts.ONE} data={data} />
      </GRP>

      <GRP title={FormLayouts.TWO}>
        <Layout type={FormLayouts.TWO} data={data} />
      </GRP>

      <GRP title={FormLayouts.THREE}>
        <Layout type={FormLayouts.THREE} data={data} />
      </GRP>

      <GRP title={FormLayouts.FOUR}>
        <Layout type={FormLayouts.FOUR} data={data} />
      </GRP>

      <GRP title={FormLayouts.FIVE}>
        <Layout type={FormLayouts.FIVE} data={data} />
      </GRP>

      <GRP title={FormLayouts.SIX}>
        <Layout type={FormLayouts.SIX} data={data} />
      </GRP>

      <GRP title={FormLayouts.SEVEN}>
        <Layout type={FormLayouts.SEVEN} data={data} />
      </GRP>

      <GRP title={FormLayouts.EIGHT}>
        <Layout type={FormLayouts.EIGHT} data={data} />
      </GRP>

      <GRP title={FormLayouts.NINE}>
        <Layout type={FormLayouts.NINE} data={data} />
      </GRP>
    </div>
  );
};