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

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

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

import theme from "../../theme";

import {
  Block,
  Section,
  Headline,
  Text,
  Container,
  Button,
  Image,
  FormField,
  Grid,
  GridItem,
  Stacks,
  List,
  ListItem,
} from "@sc/plugins/webcomponents/v2";
import { FormFieldTypes } from "@sc/modules/v2/CRUD/FormBuilder/types";
import { ComponentTypes } from "@sc/plugins/webcomponents/v2/types";

// WebFontLoader.load({
//   google: {
//     families: ["Roboto:300,400,500,700", "Reenie+Beanie"],
//   },
// });

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);

  return (
    <Block>
      <Section style={style.SECTION}>
        <Container
          style={{
            ...style.SECTION_INNER,
            maxWidth: get(data, "section.pageMargin"),
          }}
        >
          <Headline style={{ ...style.HEADLINE }}>
            Yes Kyle! I'm Ready to Join 10 Minute Funnels Today!
          </Headline>
          <Headline style={{ ...style.SUBHEADLINE, textAlign: "center" }}>
            Please Read And Agree To The Following to Proceed:
          </Headline>
          <Text style={{ ...style.TEXT, textAlign: "center" }}>
            I am ready to reserve my seat RIGHT NOW before the limited seats are
            filled!
          </Text>
          <List style={{ paddingLeft: 0 }}>
            <ListItem style={{ display: "inline-block" }}>
              <Image
                style={{
                  maxWidth: 65,
                  marginLeft: 40,
                  marginTop: 20,
                  transform: `scaleX(-1) scaleY(-1) rotate(-15deg)`,
                }}
                src="https://www.onlygfx.com/wp-content/uploads/2016/07/hand-drawn-arrow-8-300x105.png"
              />
            </ListItem>
            <ListItem
              style={{
                display: "inline-block",
                top: -5,
                position: "relative",
              }}
            >
              <Headline
                style={{
                  ...style.HEADLINE,
                  textAlign: "left",
                  fontFamily: "Reenie Beanie",
                  fontSize: "32pt",
                  padding: 10,
                  letterSpacing: -3,
                }}
              >
                Check this Box to Agree
              </Headline>
            </ListItem>
          </List>
          <Grid spacing={2}>
            <GridItem xs></GridItem>
            <GridItem xs={10}></GridItem>
          </Grid>
          <Container style={{ border: `3px dashed ${theme.highlightColor}` }}>
            <FormField
              type={FormFieldTypes.CHECKBOX}
              style={{ padding: 25 }}
              labelStyle={style.TEXT}
              label="
                  I understand everything about the product as described above
                  and I am ready to reserve my seat TODAY. I also understand and
                  agree to all other Terms and Conditions detailed on this page."
            />
          </Container>
        </Container>
      </Section>
    </Block>
  );
};

export default Layout;