import * as React from "react";
import { GRP } from "storybook/GRP";
import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";
import Layout from "../Layout";
import { FooterLayouts } 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,
} from "./";

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

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

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

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

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

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

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

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

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

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

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

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

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

export const Footer14: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={FooterLayouts.FOURTEEN}>
          <Layout type={FooterLayouts.FOURTEEN} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="https://assets.website-files.com/5d4fd160326ec183bf464939/5d4fd160326ec14b27464a23_Footer%202.jpg"
        />
      )}
      {boolean("In the Editor", true) && (
        <EditorWithCustomData
          defaultMobileState={mobileStateData.desktop}
          content={buildContentData([settings14.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,
      ])}
    />
  );
};

export const AllFooters: 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={FooterLayouts.ONE}>
        <Layout type={FooterLayouts.ONE} data={data} />
      </GRP>

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

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

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

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

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

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

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

      <GRP title={FooterLayouts.NINE}>
        <Layout type={FooterLayouts.NINE} data={data} />
      </GRP>

      <GRP title={FooterLayouts.TEN}>
        <Layout type={FooterLayouts.TEN} data={data} />
      </GRP>

      <GRP title={FooterLayouts.ELEVEN}>
        <Layout type={FooterLayouts.ELEVEN} data={data} />
      </GRP>

      <GRP title={FooterLayouts.THIRTEEN}>
        <Layout type={FooterLayouts.THIRTEEN} data={data} />
      </GRP>

      <GRP title={FooterLayouts.FOURTEEN}>
        <Layout type={FooterLayouts.FOURTEEN} data={data} />
      </GRP>
    </>
  );
};