import { startCase } from "lodash";
import { SectionTypes } from "@sc/modules/v2/Properties/types";
import theme from "@sc/components/ui/theme";
import { IComponentSettings, ComponentTypes } from "../types";
import { lorem } from "../../../misc/v2/blocks/weblayouts/utils";
import { IconTypes } from "../Icon";
import layoutTheme from "@sc/plugins/misc/v2/blocks/weblayouts/theme";

const style = {
  LISTITEM: {
    style: {
      fontFamily: layoutTheme.fontFamily,
      padding: "10px 0",
    },
    iconStyle: {
      borderRadius: "100%",
      padding: 10,
      // color: layoutTheme.backgroundColor,
    },
    contentStyle: {
      padding: 10,
    },
  },
};

const settings: IComponentSettings = {
  id: ComponentTypes.LIST,
  name: "Bullet Points",
  // thumbnail: "comp_list.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: "format_list_bulleted",
  },
  default: {
    type: ComponentTypes.LIST,
    icon: IconTypes.CheckCircleOutline,
    data: [
      {
        id: Math.random()
          .toString(36)
          .slice(2),
        caption: startCase(lorem.generateWords(11)),
        style: style.LISTITEM.style,
        iconStyle: style.LISTITEM.iconStyle,
        contentStyle: style.LISTITEM.contentStyle,
        // icon: IconTypes.CheckCircleOutline,
      },
      {
        id: Math.random()
          .toString(36)
          .slice(2),
        caption: startCase(lorem.generateWords(11)),
        style: style.LISTITEM.style,
        iconStyle: style.LISTITEM.iconStyle,
        contentStyle: style.LISTITEM.contentStyle,
        // icon: IconTypes.CheckCircleOutline,
      },
      {
        id: Math.random()
          .toString(36)
          .slice(2),
        caption: startCase(lorem.generateWords(11)),
        style: style.LISTITEM.style,
        iconStyle: style.LISTITEM.iconStyle,
        contentStyle: style.LISTITEM.contentStyle,
        // icon: IconTypes.CheckCircleOutline,
      },
    ],
    properties: {
      display: "inline-block",
      padding: 5,
    },
  },
  properties: {
    main: {
      tabs: ["Basic"],
      sections: [
        {
          tab: "Basic",
          type: SectionTypes.CUSTOM,
          id: "BulletBuilderSettings",
          sectionWrap: true,
          settings: {
            label: "Bullet Point Builder",
            icon: "construction",
            isExpanded: true,
          },
        },
        {
          tab: "Basic",
          type: SectionTypes.TYPOGRAPHY,
          settings: {
            label: "Typography",
          },
        },
        {
          tab: "Basic",
          type: SectionTypes.ICONSELECTOR,
          sectionWrap: true,
          settings: {
            label: "Default Icon",
            icon: "insert_emoticon",
            containerStyle: { maxHeight: 500, overflowY: "scroll" },
          },
        },
        {
          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: {
            label: "Alignment",
            verticalAlign: false,
            marginAlign: false,
            textAlign: true,
          },
        },
      ],
    },
  },
};

export default settings;