import * as React from "react";
import { get } from "lodash";

import { style } from "./style";
import { default as defaultData } from "./data.json";

import { doIShow, combineData, lorem } from "../../utils";

import theme from "../../theme";
import { lighten } from "@material-ui/core/styles";

import {
  Block,
  Section,
  Headline,
  Text,
  Container,
  Button,
  Progress,
  Group,
  FormField,
  Grid,
  GridItem,
  FormBuilder,
} from "@sc/plugins/webcomponents/v2";
import { FormFieldTypes } from "@sc/modules/v2/CRUD/FormBuilder/types";

const StepONE = ({ setStep }) => (
  <Section style={{ ...style.SECTION, textAlign: "center" }}>
    <Progress
      style={{ height: 30 }}
      barStyle={{ backgroundColor: theme.backgroundColor }}
      value={50}
    />
    <Text style={{ ...style.TEXT, padding: 10, marginBottom: 20 }}>
      (Make a selection, enter your email and click “Continue…” to complete)
    </Text>
    <Headline style={{ ...style.HEADLINE }}>
      Please Tell Us More About You…
    </Headline>
    <Headline
      style={{ ...style.HEADLINE, fontSize: "14pt", lineHeight: "16pt" }}
    >
      Step 1: Which of the best describes where you’re at in your business:
    </Headline>
    <Group caption="Quiz Answer Options">
      <Container
        style={{
          padding: 25,
          textAlign: "left",
          margin: "0 auto",
          maxWidth: 500,
        }}
      >
        <FormBuilder
          labelStyle={{
            fontFamily: theme.fontFamily,
            cursor: "pointer",
            fontSize: "10pt",
            lineHeight: "14pt",
          }}
          data={[
            {
              type: FormFieldTypes.RADIO,
              label: lorem.generateSentences(Math.floor(Math.random() * 2) + 1),
            },
            {
              type: FormFieldTypes.RADIO,
              label: lorem.generateSentences(Math.floor(Math.random() * 2) + 1),
            },
            {
              type: FormFieldTypes.RADIO,
              label: lorem.generateSentences(Math.floor(Math.random() * 2) + 1),
            },
            {
              type: FormFieldTypes.RADIO,
              label: lorem.generateSentences(Math.floor(Math.random() * 2) + 1),
            },
            {
              type: FormFieldTypes.RADIO,
              label: lorem.generateSentences(Math.floor(Math.random() * 2) + 1),
            },
            {
              type: FormFieldTypes.RADIO,
              label: lorem.generateSentences(Math.floor(Math.random() * 2) + 1),
            },
          ]}
        />
      </Container>
    </Group>
    <Container style={{ textAlign: "center" }}>
      <Button
        style={style.BUTTON.style}
        hoverStyle={{ backgroundColor: lighten(theme.highlightColor, 0.2) }}
        caption1="CONTINUE..."
        caption1style={style.BUTTON.caption1}
        onClick={() => setStep(2)}
      />
    </Container>
    <Text
      style={{
        ...style.TEXT,
        color: "#999",
        fontSize: "9pt",
        lineHeight: "9pt",
        padding: 0,
      }}
    >
      Your privacy is important to us and we will not spam you
    </Text>
    <Text style={{ ...style.TEXT, lineHeight: "11pt", padding: 10 }}>
      <p>
        By signing up you'll also receive access to daily{" "}
        {lorem.generateWords(3)} and exclusive offers.
      </p>
      <p>View our Privacy Policy.</p>
    </Text>
  </Section>
);

const StepTWO = ({ setStep }) => {
  return (
    <Section style={{ ...style.SECTION, textAlign: "center" }}>
      <Progress
        style={{ height: 30 }}
        barStyle={{ backgroundColor: theme.backgroundColor }}
        value={75}
      />
      <Text style={{ ...style.TEXT, padding: 10, marginBottom: 20 }}>
        (Enter your email address below and click “Continue…” to complete)
      </Text>
      <Headline
        style={{ ...style.HEADLINE, fontSize: "14pt", lineHeight: "16pt" }}
      >
        Step 2: Fill Out the Form Below...
      </Headline>
      <Container style={{ maxWidth: "100%", margin: "0 auto", padding: 20 }}>
        <FormField
          type="Text"
          name="email"
          placeholder="Enter Your Email"
          style={style.FORM_FIELD.style}
          inputStyle={style.FORM_FIELD.inputStyle}
        />
        <Button
          style={style.BUTTON.style}
          hoverStyle={{ backgroundColor: lighten(theme.highlightColor, 0.2) }}
          caption1="CONTINUE..."
          caption1style={style.BUTTON.caption1}
          onClick={() => setStep(2)}
        />
      </Container>
      <Text
        style={{
          ...style.TEXT,
          color: "#999",
          fontSize: "9pt",
          lineHeight: "9pt",
          padding: 0,
        }}
      >
        Your privacy is important to us and we will not spam you
      </Text>
      <Text style={{ ...style.TEXT, lineHeight: "11pt", padding: 10 }}>
        <p>
          By signing up you'll also receive access to daily{" "}
          {lorem.generateWords(3)} and exclusive offers.
        </p>
        <p>View our Privacy Policy.</p>
      </Text>
    </Section>
  );
};

type LayoutProps = {
  data: any;
};

const Layout: React.FC<LayoutProps> = ({ data }) => {
  const initialContent = {
    main_headline: {
      html: "Headline Goes Here",
    },
    sub_headline: {
      html: "Sub Headline Text Content Goes Here",
    },
  };

  const content = combineData(initialContent, defaultData, data);

  const [step, setStep] = React.useState(1);

  return (
    <Block>
      <Section style={style.SECTION}>
        <Container
          style={{
            ...style.SECTION_INNER,
            maxWidth: get(data, "section.pageMargin"),
          }}
        >
          {step === 1 && <StepONE setStep={setStep} />}
          {step === 2 && <StepTWO setStep={setStep} />}
        </Container>
      </Section>
    </Block>
  );
};

export default Layout;