import * as React from "react";
import theme from "@sc/plugins/misc/v2/blocks/weblayouts/theme";

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

import { lorem } from "@sc/plugins/misc/v2/blocks/weblayouts/utils";

import { Text, ListItem } from "@sc/plugins/webcomponents/v2";

import { IconTypes } from "@sc/plugins/webcomponents/v2/Icon";
import { IconSource } from "@sc/plugins/webcomponents/v2/Icon/types";

export default {
  title: "Plugins|Web Components/Medium/List/List Item",
  component: ListItem,
};

const style = {
  LI: {
    fontFamily: theme.fontFamily,
    fontSize: "13pt",
    textAlign: "left",
    lineHeight: "18pt",
    padding: "10px 0",
  },
  TEXT: {
    fontFamily: theme.fontFamily,
    fontSize: "13pt",
    lineHeight: "18pt",
    padding: "10px 0",
    color: theme.backgroundColor,
  },
};

export const Simple: React.FC = () => {
  return <ListItem style={style.LI}>Architecture</ListItem>;
};

export const WithIconAndCustomContent: React.FC = () => {
  return (
    <ListItem
      icon={IconTypes.PictureAsPdf}
      iconSource={IconSource.MATERIAL}
      iconStyle={{
        fontSize: "28pt",
        padding: 15,
        color: theme.backgroundColor,
      }}
    >
      <Text
        style={{
          ...style.TEXT,
          fontWeight: "bold" as "bold",
          paddingTop: 20,
        }}
      >
        Value creation worksheet
      </Text>
      <Text style={{ ...style.TEXT }}>{lorem.generateParagraphs(1)}</Text>
    </ListItem>
  );
};

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