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

import Layout from "../Layout";
import { HeaderLayouts } 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,
  settings22,
  settings23,
} from "./";

import theme from "../theme";

// export const html2canvas = typeof window === "object" ? require("html2canvas") : {}
import html2canvas from "html2canvas";

export default {
  title: "Plugins|Web Layouts/Headers",
  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>
      <div style={{ border: "1px solid rgb(255,255,255,0.1)" }}>{children}</div>
    </>
  );
};

export const Header01: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={HeaderLayouts.ONE}>
          <Layout type={HeaderLayouts.ONE} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP title="Inspiration">
          <img
            style={{ width: "100%" }}
            src="https://assets.website-files.com/5d4fd160326ec183bf464939/5d4fd160326ec11a46464972_Headers%207.jpg"
          />
        </GRP>
      )}

      {boolean("In the Editor", true) && (
        <EditorWithCustomData
          defaultMobileState={mobileStateData.desktop}
          content={buildContentData([settings01.default])}
        />
      )}
    </>
  );
};

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

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

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

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

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

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

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

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

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

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

export const Header12: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={HeaderLayouts.TWELVE}>
          <Layout type={HeaderLayouts.TWELVE} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP title="Inspiration">
          <img
            style={{ width: "100%" }}
            src="https://assets.website-files.com/5d4fd160326ec183bf464939/5d4fd160326ec1345d464978_Headers%202.jpg"
          />
        </GRP>
      )}
      {boolean("In the Editor", true) && (
        <EditorWithCustomData
          defaultMobileState={mobileStateData.desktop}
          content={buildContentData([settings12.default])}
        />
      )}
    </>
  );
};

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

export const Header14: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={HeaderLayouts.FOURTEEN}>
          <Layout type={HeaderLayouts.FOURTEEN} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP title="Inspiration">
          <img
            style={{ width: "100%" }}
            src="https://assets.website-files.com/5d4fd160326ec183bf464939/5d4fd160326ec1f2ed464991_Headers%204.jpg"
          />
        </GRP>
      )}
      {boolean("In the Editor", true) && (
        <EditorWithCustomData
          defaultMobileState={mobileStateData.desktop}
          content={buildContentData([settings14.default])}
        />
      )}
    </>
  );
};

export const Header15: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={HeaderLayouts.FIFTEEN}>
          <Layout type={HeaderLayouts.FIFTEEN} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP title="Inspiration">
          <img
            style={{ width: "100%" }}
            src="https://assets.website-files.com/5d4fd160326ec183bf464939/5d4fd160326ec15aaf464997_Headers%203.jpg"
          />
        </GRP>
      )}
      {boolean("In the Editor", true) && (
        <EditorWithCustomData
          defaultMobileState={mobileStateData.desktop}
          content={buildContentData([settings15.default])}
        />
      )}
    </>
  );
};

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

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

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

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

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

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

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

export const Header23: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={HeaderLayouts.TWENTYTHREE}>
          <Layout type={HeaderLayouts.TWENTYTHREE} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP title="Inspiration">
          <img
            style={{ width: "100%" }}
            src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/placeholders/Headers/23.png"
          />
        </GRP>
      )}
      {boolean("In the Editor", true) && (
        <EditorWithCustomData
          defaultMobileState={mobileStateData.desktop}
          content={buildContentData([settings23.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,
        settings22.default,
        settings23.default,
      ])}
    />
  );
};

export const AllHeaders: 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={HeaderLayouts.ONE}>
        <Layout type={HeaderLayouts.ONE} data={data} />
      </GRP>
      <GRP title={HeaderLayouts.TWO}>
        <Layout type={HeaderLayouts.TWO} data={data} />
      </GRP>
      <GRP title={HeaderLayouts.THREE}>
        <Layout type={HeaderLayouts.THREE} data={data} />
      </GRP>
      <GRP title={HeaderLayouts.FOUR}>
        <Layout type={HeaderLayouts.FOUR} data={data} />
      </GRP>
      <GRP title={HeaderLayouts.FIVE}>
        <Layout type={HeaderLayouts.FIVE} data={data} />
      </GRP>
      <GRP title={HeaderLayouts.SIX}>
        <Layout type={HeaderLayouts.SIX} data={data} />
      </GRP>
      <GRP title={HeaderLayouts.SEVEN}>
        <Layout type={HeaderLayouts.SEVEN} data={data} />
      </GRP>
      <GRP title={HeaderLayouts.EIGHT}>
        <Layout type={HeaderLayouts.EIGHT} data={data} />
      </GRP>
      <GRP title={HeaderLayouts.NINE}>
        <Layout type={HeaderLayouts.NINE} data={data} />
      </GRP>
      <GRP title={HeaderLayouts.TEN}>
        <Layout type={HeaderLayouts.TEN} data={data} />
      </GRP>
      <GRP title={HeaderLayouts.ELEVEN}>
        <Layout type={HeaderLayouts.ELEVEN} data={data} />
      </GRP>
      <GRP title={HeaderLayouts.TWELVE}>
        <Layout type={HeaderLayouts.TWELVE} data={data} />
      </GRP>
      <GRP title={HeaderLayouts.THIRTEEN}>
        <Layout type={HeaderLayouts.THIRTEEN} data={data} />
      </GRP>
      <GRP title={HeaderLayouts.FOURTEEN}>
        <Layout type={HeaderLayouts.FOURTEEN} data={data} />
      </GRP>
      <GRP title={HeaderLayouts.FIFTEEN}>
        <Layout type={HeaderLayouts.FIFTEEN} data={data} />
      </GRP>
      <GRP title={HeaderLayouts.FIFTEEN}>
        <Layout type={HeaderLayouts.FIFTEEN} data={data} />
      </GRP>
      <GRP title={HeaderLayouts.SIXTEEN}>
        <Layout type={HeaderLayouts.SIXTEEN} data={data} />
      </GRP>
      <GRP title={HeaderLayouts.SEVENTEEN}>
        <Layout type={HeaderLayouts.SEVENTEEN} data={data} />
      </GRP>
      <GRP title={HeaderLayouts.EIGHTEEN}>
        <Layout type={HeaderLayouts.EIGHTEEN} data={data} />
      </GRP>
      <GRP title={HeaderLayouts.NINETEEN}>
        <Layout type={HeaderLayouts.NINETEEN} data={data} />
      </GRP>
      <GRP title={HeaderLayouts.TWENTY}>
        <Layout type={HeaderLayouts.TWENTY} data={data} />
      </GRP>
      <GRP title={HeaderLayouts.TWENTYONE}>
        <Layout type={HeaderLayouts.TWENTYONE} data={data} />
      </GRP>
      <GRP title={HeaderLayouts.TWENTYTWO}>
        <Layout type={HeaderLayouts.TWENTYTWO} data={data} />
      </GRP>
      <GRP title={HeaderLayouts.TWENTYTHREE}>
        <Layout type={HeaderLayouts.TWENTYTHREE} data={data} />
      </GRP>
    </>
  );
};