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,
  Accordian,
  AccordianItem,
} from "@sc/plugins/webcomponents/v2";

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}>Frequently Asked Questions</Headline>
          <Accordian
            data={[
              {
                titleStyle: style.SUBHEADLINE,
                title: "How many times do I need to pay rep month?",
                children: (
                  <Text style={style.TEXT}>
                    Lorem ipsum dolor sit amet. Et praesentium sint et veniam
                    nulla est voluptatem velit est odio iusto. Et Quis similique
                    est repellat beatae sed nesciunt iste aut laborum sunt ut
                    doloribus soluta ex quam accusamus.
                  </Text>
                ),
              },
              {
                titleStyle: style.SUBHEADLINE,
                title: "Where is repost button and how to delete account?",
                children: (
                  <Text style={style.TEXT}>
                    Aut perspiciatis natus qui eius fugit in dolor soluta rem
                    architecto quas cum error quia. Eum unde omnis et assumenda
                    corporis qui dolores impedit.
                  </Text>
                ),
              },
              {
                titleStyle: style.SUBHEADLINE,
                title: "It's true. Getting results is much easier than?",
                open: true,
                children: (
                  <Text style={style.TEXT}>
                    Et delectus numquam in reprehenderit alias est molestiae
                    amet. Aut autem veritatis quo tenetur facere et velit quia
                    et iusto quia. Hic voluptatem nulla sed explicabo asperiores
                    33 deserunt dolore et reprehenderit facilis ut nostrum
                    soluta qui assumenda ipsa.
                  </Text>
                ),
              },
              {
                titleStyle: style.SUBHEADLINE,
                title: "How to change password?",
                children: (
                  <Text style={style.TEXT}>
                    Sit minima consectetur et quasi odit et dolores laborum et
                    rerum odio. Quo expedita autem alias alias non adipisci
                    assumenda nam perspiciatis fuga. Est aspernatur repellendus
                    eos maxime nisi est tempora corrupti ea consequuntur quia
                    sed galisum ratione qui reiciendis animi qui voluptatum
                    odit.
                  </Text>
                ),
              },
            ]}
          />
          {/* <Accordian>
            <AccordianItem
              titleStyle={style.SUBHEADLINE}
              title="How many times do I need to pay rep month?"
            >
              <Text style={style.TEXT}>
                Lorem ipsum dolor sit amet. Et praesentium sint et veniam nulla
                est voluptatem velit est odio iusto. Et Quis similique est
                repellat beatae sed nesciunt iste aut laborum sunt ut doloribus
                soluta ex quam accusamus.
              </Text>
            </AccordianItem>
            <AccordianItem
              titleStyle={style.SUBHEADLINE}
              title="Where is repost button and how to delete account?"
            >
              <Text style={style.TEXT}>
                Aut perspiciatis natus qui eius fugit in dolor soluta rem
                architecto quas cum error quia. Eum unde omnis et assumenda
                corporis qui dolores impedit.
              </Text>
            </AccordianItem>
            <AccordianItem
              open
              titleStyle={style.SUBHEADLINE}
              title="It's true. Getting results is much easier than?"
            >
              <Text style={style.TEXT}>
                Et delectus numquam in reprehenderit alias est molestiae amet.
                Aut autem veritatis quo tenetur facere et velit quia et iusto
                quia. Hic voluptatem nulla sed explicabo asperiores 33 deserunt
                dolore et reprehenderit facilis ut nostrum soluta qui assumenda
                ipsa.
              </Text>
            </AccordianItem>
            <AccordianItem
              titleStyle={style.SUBHEADLINE}
              title="How to change password?"
            >
              <Text style={style.TEXT}>
                Sit minima consectetur et quasi odit et dolores laborum et rerum
                odio. Quo expedita autem alias alias non adipisci assumenda nam
                perspiciatis fuga. Est aspernatur repellendus eos maxime nisi
                est tempora corrupti ea consequuntur quia sed galisum ratione
                qui reiciendis animi qui voluptatum odit.
              </Text>
            </AccordianItem>
          </Accordian> */}
        </Container>
      </Section>
    </Block>
  );
};

export default Layout;