import { SectionTypes } from "@sc/modules/v2/Properties/types";
import { IComponentSettings, ComponentTypes } from "../types";

import {
  defaultData,
  styleData,
} from "@sc/modules/v2/CRUD/FormBuilder/FormBuilder.stories";
import { FormFieldTypes } from "@sc/modules/v2/CRUD/FormBuilder/types";
import { FieldNamePresets } from "@sc/modules/v2/CRUD/FormBuilder/EditFormField/types";
const style = {
  FORM_FIELD: {
    style: {
      padding: "5px 0",
      maxWidth: "100%",
    },
    inputStyle: {
      width: "100%",
      padding: 15,
      border: "1px solid #DDD",
      borderRadius: 4,
    },
    labelStyle: {
      fontFamily: "Roboto",
      fontSize: "10pt",
      textAlign: "left",
      padding: 5,
    },
  },
};
const settings: IComponentSettings = {
  id: ComponentTypes.FORM,
  name: "Form Builder",
  description: "",
  thumbnail: "comp_form.png",
  default: {
    type: ComponentTypes.FORM,
    data: [
      {
        type: FormFieldTypes.TEXT,
        name: "firstName",
        placeholder: "First Name",
        preset: FieldNamePresets.FIRSTNAME,
      },
      {
        type: FormFieldTypes.TEXT,
        name: "lastName",
        placeholder: "Last Name",
        preset: FieldNamePresets.LASTNAME,
      },
      {
        type: FormFieldTypes.TEXT,
        name: "email",
        placeholder: "Email",
        preset: FieldNamePresets.EMAIL,
      },
    ],
    properties: {
      containerStyle: style.FORM_FIELD.style,
      inputStyle: style.FORM_FIELD.inputStyle,
      labelStyle: style.FORM_FIELD.labelStyle,
    },
  },
  properties: {
    main: {
      tabs: ["Basic", "Advanced"],
      sections: [
        {
          tab: "Basic",
          type: SectionTypes.CUSTOM,
          id: "formBuilder_settings",
          sectionWrap: true,
          settings: {
            label: "Form Builder",
            icon: "construction",
            isExpanded: true,
          },
        },
        {
          tab: "Basic",
          type: SectionTypes.POSITIONPADDING,
          settings: {},
        },
        {
          tab: "Basic",
          type: SectionTypes.WIDTH,
          sectionWrap: true,
          settings: {
            label: "Button Width",
            text: "Width",
            icon: "swap_horiz",
          },
        },
        // {
        //   tab: "Basic",
        //   type: SectionTypes.ALIGNMENT,
        //   settings: {
        //     verticalAlign: false,
        //     marginAlign: false,
        //     textAlign: true,
        //   },
        // },
        {
          tab: "Advanced",
          type: SectionTypes.BORDERSSHADOW,
          settings: {
            isExpanded: true,
          },
        },
      ],
    },
  },
};

export default settings;