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

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,
  Grid,
  GridItem,
  List,
  ListItem,
  Divider,
} from "@sc/plugins/webcomponents/v2";
import { IconTypes } from "@sc/plugins/webcomponents/v2/Icon";

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")
          }}
        >
          <Container style={{ maxWidth: 1200, margin: "0 auto" }}>
            <Grid spacing={2} style={{ marginTop: 40 }}>
              <GridItem xs={4}>
                <Container
                  style={{
                    // borderRadius: 5,
                    // backgroundColor: "#f5f5f5",
                    padding: 30,
                  }}
                >
                  <Headline style={{ ...style.HEADLINE, textAlign: "left" }}>
                    Check our pricing
                  </Headline>
                  <Text
                    style={{ ...style.TEXT, textAlign: "left", marginTop: 40 }}
                  >
                    Business Analysts use wireframes to visually support the
                    business rules and interaction requirements for a screen.
                  </Text>
                </Container>
              </GridItem>
              <GridItem xs={4}>
                <Container
                  style={{
                    borderRadius: 5,
                    backgroundColor: theme.backgroundColor,
                    // padding: 30
                  }}
                >
                  <Container
                    style={{
                      padding: 30,
                    }}
                  >
                    <Grid>
                      <GridItem xs={6}>
                        <Text
                          style={{
                            ...style.TEXT,
                            color: theme.foregroundColor,
                            fontWeight: "bold" as "bold",
                            textAlign: "left",
                          }}
                        >
                          Startup
                        </Text>
                      </GridItem>
                      <GridItem xs={6}>
                        <Text
                          style={{
                            ...style.TEXT,
                            color: theme.foregroundColor,
                            fontWeight: "bold" as "bold",
                            textAlign: "right",
                          }}
                        >
                          $29
                        </Text>
                      </GridItem>
                    </Grid>
                    <Text
                      style={{
                        ...style.TEXT,
                        color: theme.foregroundColor,
                        fontSize: "11pt",
                      }}
                    >
                      Ut enim ad minim veniam, quis nostrud exercitation ullamco
                      laboris
                    </Text>
                  </Container>

                  <Divider size={1} color="#DDD" />

                  <Container
                    style={{
                      paddingBottom: 30,
                    }}
                  >
                    <List style={style.LIST}>
                      <ListItem
                        style={{
                          ...style.LI.style,
                          color: theme.foregroundColor,
                        }}
                        contentStyle={style.LI.contentStyle}
                        icon={IconTypes.Check}
                      >
                        Auto update mode
                      </ListItem>
                      <ListItem
                        style={{
                          ...style.LI.style,
                          color: theme.foregroundColor,
                        }}
                        contentStyle={style.LI.contentStyle}
                        icon={IconTypes.Check}
                      >
                        Online operator 24/7
                      </ListItem>
                      <ListItem
                        style={{
                          ...style.LI.style,
                          color: theme.foregroundColor,
                        }}
                        contentStyle={style.LI.contentStyle}
                        icon={IconTypes.Check}
                      >
                        Internation posting
                      </ListItem>
                      <ListItem
                        style={{
                          ...style.LI.style,
                          color: theme.foregroundColor,
                        }}
                        contentStyle={style.LI.contentStyle}
                        icon={IconTypes.Check}
                      >
                        Unique newsletters all
                      </ListItem>
                      <ListItem
                        style={{
                          ...style.LI.style,
                          color: theme.foregroundColor,
                        }}
                        contentStyle={style.LI.contentStyle}
                        icon={IconTypes.Check}
                      >
                        20 Design Templates
                      </ListItem>
                    </List>
                    <Container style={{ textAlign: "center" }}>
                      <Button
                        style={{
                          ...style.BUTTON.style,
                          backgroundColor: theme.foregroundColor,
                          // border: `1px solid ${theme.backgroundColor}`
                        }}
                        caption1="Purchase"
                        caption1style={{
                          ...style.BUTTON.caption1,
                          color: theme.backgroundColor,
                        }}
                      />
                    </Container>
                  </Container>
                </Container>
              </GridItem>
              <GridItem xs={4}>
                <Container
                  style={{
                    borderRadius: 5,
                    backgroundColor: "#F0F0F0",
                    // padding: 30
                  }}
                >
                  <Container
                    style={{
                      padding: 30,
                    }}
                  >
                    <Grid>
                      <GridItem xs={6}>
                        <Text
                          style={{
                            ...style.TEXT,
                            // color: theme.foregroundColor,
                            fontWeight: "bold" as "bold",
                            textAlign: "left",
                          }}
                        >
                          Startup
                        </Text>
                      </GridItem>
                      <GridItem xs={6}>
                        <Text
                          style={{
                            ...style.TEXT,
                            // color: theme.foregroundColor,
                            fontWeight: "bold" as "bold",
                            textAlign: "right",
                          }}
                        >
                          $219
                        </Text>
                      </GridItem>
                    </Grid>
                    <Text style={{ ...style.TEXT, fontSize: "11pt" }}>
                      Best option for advanced players who want to try all great
                      features
                    </Text>
                  </Container>

                  <Divider size={1} color="#CCC" />

                  <Container
                    style={{
                      paddingBottom: 30,
                    }}
                  >
                    <List style={style.LIST}>
                      <ListItem
                        style={{
                          ...style.LI.style,
                        }}
                        contentStyle={style.LI.contentStyle}
                        icon={IconTypes.Check}
                      >
                        Auto update mode
                      </ListItem>
                      <ListItem
                        style={{
                          ...style.LI.style,
                        }}
                        contentStyle={style.LI.contentStyle}
                        icon={IconTypes.Check}
                      >
                        Online operator 24/7
                      </ListItem>
                      <ListItem
                        style={{
                          ...style.LI.style,
                        }}
                        contentStyle={style.LI.contentStyle}
                        icon={IconTypes.Check}
                      >
                        Internation posting
                      </ListItem>
                      <ListItem
                        style={{
                          ...style.LI.style,
                        }}
                        contentStyle={style.LI.contentStyle}
                        icon={IconTypes.Check}
                      >
                        Unique newsletters all
                      </ListItem>
                      <ListItem
                        style={{
                          ...style.LI.style,
                        }}
                        contentStyle={style.LI.contentStyle}
                        icon={IconTypes.Check}
                      >
                        20 Design Templates
                      </ListItem>
                    </List>
                    <Container style={{ textAlign: "center" }}>
                      <Button
                        style={{
                          ...style.BUTTON.style,
                          backgroundColor: "transparent",
                          border: `1px solid ${theme.backgroundColor}`,
                        }}
                        caption1="Purchase"
                        caption1style={{
                          ...style.BUTTON.caption1,
                          color: theme.backgroundColor,
                        }}
                      />
                    </Container>
                  </Container>
                </Container>
              </GridItem>
            </Grid>
          </Container>
        </Container>
      </Section>
    </Block>
  );
};

export default Layout;