import * as React from "react";
import _ from "lodash";

import EditorObject from "@sc/modules/page/Builder/EditorObject";
import { NewWebComponentProps } from "./types";
import { NewWebComponent } from "./live";
import PropertiesBuilder from "@sc/modules/v2/Properties/components/generator";
import newWebComponentSettings from "./settings";
import { updateSection } from "@sc/modules/v2/Properties/components/generator";
import { SectionTypes } from "@sc/modules/v2/Properties/types";
import { V1ObjectWrapper, convertProperties } from "../V1ObjectWrapper";

const Properties = (props) => {
  const { updateComponentSettings, settings } = props;
  const { properties } = newWebComponentSettings;
  const { sections } = properties.main;

  const updatedSections = updateSection(sections, SectionTypes.COLORPICKER, {
    onChange: (e) => {
      updateComponentSettings(
        settings.id,
        {
          ...settings,
          myCustomProperty: { backgroundColor: e.hex },
        },
        true,
        0
      );
    },
  });

  return (
    <PropertiesBuilder
      {...props}
      data={{
        ...properties,
        main: { ...properties.main, sections: updatedSections },
      }}
      title="New Web Component Settings"
    />
  );
};

export const NewWebComponentEditorVersion: React.FC<NewWebComponentProps> = (
  props
) => {
  const { settings, id } = props;
  const properties = convertProperties(settings.properties);

  return (
    <V1ObjectWrapper settings={settings}>
      <EditorObject
        title="NewWebComponent"
        id={id}
        {...props}
        PropertiesView={Properties}
      >
        <NewWebComponent
          {...settings}
          properties={properties}
          testId="WC-NEWWEBCOMPONENT-EDIT"
        />
      </EditorObject>
    </V1ObjectWrapper>
  );
};

export default NewWebComponentEditorVersion;