import { SectionTypes } from "@sc/modules/v2/Properties/types";
import theme from "@sc/components/ui/theme";
import { IComponentSettings, ComponentTypes } from "../types";
import { FormFieldTypes } from "@sc/modules/v2/CRUD/FormBuilder/types";

const settings: IComponentSettings = {
  id: ComponentTypes.FORMFIELD,
  name: "Form Field",
  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: "input",
  },
  default: {
    type: ComponentTypes.FORMFIELD,
    fieldType: FormFieldTypes.TEXT,
    properties: {
      display: "inline-block",
    },
    attributes: {},
  },
  properties: {
    main: {
      tabs: ["Basic", "Advanced"],
      sections: [
        {
          tab: "Basic",
          type: SectionTypes.CUSTOM,
          id: "field_settings",
          sectionWrap: true,
          settings: {
            label: "Field Settings",
            icon: "settings",
            isExpanded: true,
          },
        },
        {
          tab: "Basic",
          type: SectionTypes.TYPOGRAPHY,
          settings: {
            label: "Field Font",
          },
        },
        {
          tab: "Basic",
          type: SectionTypes.POSITIONPADDING,
          settings: {},
        },
        {
          tab: "Basic",
          type: SectionTypes.WIDTHHEIGHT,
          settings: {
            label: "Field Size",
          },
        },
        {
          tab: "Basic",
          type: SectionTypes.ALIGNMENT,
          settings: {
            label: "Alignment",
            verticalAlign: false,
            marginAlign: false,
            textAlign: true,
          },
        },
        {
          tab: "Advanced",
          type: SectionTypes.BORDERSSHADOW,
          settings: {
            label: "Borders & Shadow",
          },
        },
        {
          tab: "Advanced",
          type: SectionTypes.ACTIONS,
          settings: {
            label: "Field Actions",
            isExpanded: true,
          },
        },
      ],
    },
  },
};

export default settings;