import { SectionTypes } from "@sc/modules/v2/Properties/types";
import theme from "@sc/components/ui/theme";
import wltheme from "@sc/plugins/misc/v2/blocks/weblayouts/theme";
import { lorem } from "@sc/plugins/misc/v2/blocks/weblayouts/utils";

import { IComponentSettings, ComponentTypes } from "../types";
import { IconTypes } from "../Icon";
import { IconSource } from "../Icon/live";

const settings: IComponentSettings = {
  id: ComponentTypes.LISTITEM,
  name: "List Item",
  // thumbnail: "comp_text.png",
  description: "",
  thumbnail: {
    style: {
      background:
        theme.altColor[Math.floor(Math.random() * theme.altColor.length)],
      color: `rgb(255,255,255,0.85)`,
      fontFamily: "Roboto",
      fontSize: "8pt",
      textAlign: "center",
      paddingTop: 15,
    },
    icon: "dns",
  },
  default: {
    type: ComponentTypes.LISTITEM,
    canHaveChildren: false,
    properties: {
      display: "inline-block",
    },
    icon: IconTypes.PictureAsPdf,
    iconSource: IconSource.MATERIAL,
    iconStyle: {
      fontSize: "28pt",
      padding: 15,
      color: theme.darkColor,
    },
    html: `<p style="font-weight: bold; font-size: 14pt;"><strong>Value creation worksheet</strong></p><p>_</p><p style="font-family: ${
      wltheme.fontFamily
    }; font-size: 14pt; line-height: 18pt; padding: 10px 0; color: ${
      wltheme.backgroundColor
    };">${lorem.generateParagraphs(1)}</p>`,
  },
  properties: {
    main: {
      tabs: ["Basic", "Typography"],
      sections: [
        {
          tab: "Basic",
          type: SectionTypes.ICONSELECTOR,
          sectionWrap: true,
          settings: {
            label: "Choose an Icon",
            icon: "insert_emoticon",
            containerStyle: { maxHeight: 400, overflowY: "scroll" },
            isExpanded: true,
          },
        },
        {
          tab: "Basic",
          type: SectionTypes.BUTTONSLIDER,
          sectionWrap: true,
          settings: {
            label: "Icon Size",
            icon: "aspect_ratio",
            text: "Icon Size",
            button1: { icon: "remove", value: "SHRINK" },
            button2: { icon: "add", value: "GROW" },
            minValue: 10,
            maxValue: 250,
            value: 42,
            showAutoCheck: false,
          },
        },
        {
          tab: "Basic",
          type: SectionTypes.COLORPICKER,
          sectionWrap: true,
          settings: {
            icon: "colorize",
            label: "Icon Color",
            text: "Icon Color",
          },
        },
        {
          tab: "Typography",
          type: SectionTypes.TYPOGRAPHY,
          settings: {
            isExpanded: true,
            colorExpanded: true,
            showLineHeight: true,
          },
        },
        {
          tab: "Basic",
          type: SectionTypes.POSITIONPADDING,
          settings: {},
        },
        {
          tab: "Basic",
          type: SectionTypes.WIDTH,
          sectionWrap: true,
          settings: {
            label: "Width",
            text: "Width",
            icon: "swap_horiz",
          },
        },
        {
          tab: "Basic",
          type: SectionTypes.ALIGNMENT,
          settings: {
            verticalAlign: false,
            marginAlign: false,
            textAlign: true,
          },
        },
      ],
    },
  },
};

export default settings;