import { SectionTypes } from "@sc/modules/v2/Properties/types";
import { themeSettings } from "@sc/plugins/webcomponents/v2/theme";

import { IComponentSettings, ComponentTypes } from "../types";
import { DividerTypes } from "./types";

const settings: IComponentSettings = {
  id: ComponentTypes.DIVIDER,
  name: "Divider",
  description: "",
  thumbnail: "comp_dividers.png",
  default: {
    type: ComponentTypes.DIVIDER,
    properties: {
      // margin: "10px auto",
      width: "100%",
      display: "inline-block",
      // display: "block",
      textAlign: "center",
    },
    dividerType: DividerTypes.HORIZONTAL,
    // color: themeSettings.default.highlightColor,
    color: "#f05a1f",
    size: 3,
  },
  properties: {
    main: {
      // tabs: ["Basic"],
      sections: [
        {
          type: SectionTypes.CUSTOM,
          id: "custom_type",
          sectionWrap: true,
          settings: {
            label: "Divider Style",
            isExpanded: true,
            icon: "format_paint",
          },
        },
        {
          type: SectionTypes.WIDTH,
          sectionWrap: true,
          settings: {
            label: "Divider Width",
            text: "Width",
            icon: "swap_horiz",
            showAutoCheck: false,
            isExpanded: true,
          },
        },
        {
          type: SectionTypes.HEIGHT,
          sectionWrap: true,
          settings: {
            label: "Divider Size",
            text: "Size",
            icon: "height",
            showAutoCheck: false,
            minValue: 1,
            maxValue: 500,
          },
        },
        {
          type: SectionTypes.COLORPICKER,
          sectionWrap: true,
          settings: {
            label: "Divider Color",
            icon: "colorize",
          },
        },
        {
          type: SectionTypes.POSITION,
          sectionWrap: true,
          settings: {
            label: "Divider Position",
            icon: "swap_vert",
          },
        },
        {
          type: SectionTypes.ALIGNMENT,
          settings: {
            verticalAlign: false,
            marginAlign: false,
            textAlign: true,
          },
        },
      ],
    },
  },
};

export default settings;