import * as React from "react";
import _ from "lodash";
import theme from "@sc/plugins/misc/v2/blocks/weblayouts/theme";
import { lorem } from "@sc/plugins/misc/v2/blocks/weblayouts/utils";
import { ComponentTypes } from "../types";

import settings from "./settings";
import {
  sampleContentData,
  EditorWithCustomData,
} from "@sc/modules/page/Builder/Builder.stories";

import {
  Text,
  Container,
  Accordian,
  AccordianItem,
} from "@sc/plugins/webcomponents/v2";

export default {
  title: "Plugins|Web Components/Moderate/Accordian",
  component: Accordian,
  subcomponents: { AccordianItem },
};

const style = {
  HEADLINE: {
    fontFamily: theme.fontFamily,
    fontSize: "32pt",
    fontWeight: "bold" as "bold",
    textAlign: "center",
  },
  SUBHEADLINE: {
    fontFamily: theme.fontFamily,
    fontSize: "14pt",
    fontWeight: "bold" as "bold",
  },
  TEXT: {
    fontFamily: theme.fontFamily,
    fontSize: "12pt",
    lineHeight: "18pt",
  },
};

export const Default: React.FC = () => {
  const data = [
    {
      type: ComponentTypes.ACCORDIANITEM,
      title: _.startCase(lorem.generateWords(5)),
      titleStyle: { padding: 5 },
      canHaveChildren: true,
      children: (
        <Container>
          <Text>{lorem.generateParagraphs(2)}</Text>
        </Container>
      ),
    },
    {
      type: ComponentTypes.ACCORDIANITEM,
      title: _.startCase(lorem.generateWords(5)),
      titleStyle: { padding: 5 },
      canHaveChildren: true,
      children: (
        <Container>
          <Text>{lorem.generateParagraphs(2)}</Text>
        </Container>
      ),
    },
    {
      type: ComponentTypes.ACCORDIANITEM,
      title: _.startCase(lorem.generateWords(5)),
      titleStyle: { padding: 5 },
      canHaveChildren: true,
      children: (
        <Container>
          <Text>{lorem.generateParagraphs(2)}</Text>
        </Container>
      ),
    },
  ];

  return (
    <div style={{ padding: 100 }}>
      <Accordian data={data} />
    </div>
  );
};

export const InTheEditor: React.FC = () => {
  return (
    <EditorWithCustomData
      content={[
        { id: "CustomField", parent: "u5j1r64m5rf", ...settings.default },
        ...sampleContentData,
      ]}
    />
  );
};