import { get, startCase, uniqueId } from "lodash";
import {
  ILayoutSettings,
  PageSectionCategory,
} from "@sc/plugins/misc/v2/blocks/weblayouts/types";
import { ComponentTypes } from "@sc/plugins/webcomponents/v2/types";
import { combineData, lorem } from "../../utils";
import { default as defaultData } from "./data.json";
import { style } from "./style";
import {
  getImagePlaceholder,
  ImagePlaceholderTypes,
  getVideoPlaceholder,
  VideoPlaceholderTypes,
} from "../../Placeholders";
import theme from "../../theme";
import { FormLayouts } from "../types";
import { IconTypes } from "@sc/plugins/webcomponents/v2/Icon";
import { FormFieldTypes } from "@sc/modules/v2/CRUD/FormBuilder/types";

const content = combineData(defaultData);

const settings: ILayoutSettings = {
  label: FormLayouts.SEVENTEEN,
  layout: FormLayouts.SEVENTEEN,
  previewImage:
    "https://sandcastleassets.s3.amazonaws.com/blocks/forms/Form17.png",
  default: {
    type: ComponentTypes.SECTION,
    label: PageSectionCategory.FORM,
    bodyOnly: true,
    canHaveChildren: false,
    properties: {
      ...style.SECTION,
      ...style.SECTION_INNER,
    },
    children: [
      {
        type: ComponentTypes.HEADLINE,
        canHaveChildren: false,
        properties: {
          ...style.HEADLINE,
        },
        html: "Yes! I'm Ready to Join Today!",
      },
      {
        type: ComponentTypes.HEADLINE,
        canHaveChildren: false,
        properties: {
          ...style.SUBHEADLINE,
          textAlign: "center",
        },
        html: "Please Read And Agree To The Following to Proceed:",
      },
      {
        type: ComponentTypes.TEXT,
        canHaveChildren: false,
        properties: { ...style.TEXT, textAlign: "center" },
        html:
          "I am ready to reserve my seat RIGHT NOW before the limited seats are filled!",
      },
      {
        type: ComponentTypes.LISTITEM,
        canHaveChildren: false,
        properties: { display: "inline-block", marginTop: 20 },
        html: `<h1 style="text-align:left;font-family:Reenie Beanie;font-size:32pt;padding:10px;letter-spacing:-3px">Check this Box to Agree</h1>`,
        icon: IconTypes.Undo,
        iconStyle: {
          fontSize: "32pt",
          transform: `rotate(-45deg)`,
          margin: 5,
        },
      },
      {
        type: ComponentTypes.CONTAINER,
        canHaveChildren: true,
        properties: {
          // border: `3px dashed ${theme.highlightColor}`,
          borderWidth: 3,
          borderColor: theme.highlightColor,
          borderStyle: "dashed",
          padding: 10,
        },
        children: [
          {
            type: ComponentTypes.FORMFIELD,
            canHaveChildren: false,
            attributes: {
              placeholder: "Terms",
              name: "Terms",
              items: [
                {
                  id: 0,
                  label: `I understand everything about the product as described above and I am ready to reserve my seat TODAY. I also understand and agree to all other Terms and Conditions detailed on this page. ${lorem.generateSentences(
                    3
                  )}`,
                  value: false,
                },
              ],
            },
            fieldType: FormFieldTypes.CHECKBOXES,
            styles: {
              containerStyle: {
                marginTop: 20,
              },
            },
          },
        ],
      },
    ],
  },
};

export default settings;