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

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

export const Quiz01: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={QuizLayouts.ONE}>
          <Layout type={QuizLayouts.ONE} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/placeholders/Quiz/01.png"
        />
      )}
    </>
  );
};

export const Quiz02: React.FC = () => {
  return (
    <>
      {boolean("Show Section", false) && (
        <GRP title={QuizLayouts.TWO}>
          <Layout type={QuizLayouts.TWO} />
        </GRP>
      )}
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/placeholders/Quiz/02.png"
        />
      )}
    </>
  );
};

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

      <GRP title={QuizLayouts.TWO}>
        <Layout type={QuizLayouts.TWO} data={data} />
      </GRP>
    </div>
  );
};