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

import { RichEditor } from "@sc/modules/page/Builder/Properties";
import EditorObject from "@sc/modules/page/Builder/EditorObject";
import PropertiesBuilder from "@sc/modules/v2/Properties/components/generator";
import { updateSection } from "@sc/modules/v2/Properties/components/generator";
import { SectionTypes } from "@sc/modules/v2/Properties/types";
import { IconTypes } from "../Icon";

import { ListItem } from "./live";
import { PluginProps } from "./types";
import { V1ObjectWrapper, convertProperties } from "../V1ObjectWrapper";

import listItemSettings from "./settings";

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

  const withIcon = updateSection(sections, SectionTypes.ICONSELECTOR, {
    onChange: (e) => {
      updateComponentSettings(
        settings.id,
        { ...settings, icon: IconTypes[e] },
        true,
        0
      );
    },
  });

  const withSize = updateSection(withIcon, SectionTypes.BUTTONSLIDER, {
    // value: _.get(settings, "properties.fontSize", "1pt").replace("pt", ""),
    onChange: (e) => {
      console.log("size", e);
      switch (e) {
        case "GROW": {
          const value =
            parseInt(
              _.get(settings, "properties.fontSize", "1pt").replace("pt")
            ) + 5;
          updateComponentSettings(
            settings.id,
            {
              ...settings,
              iconStyle: { ...settings.iconStyle, fontSize: `${value}pt` },
            },
            true,
            0
          );
          break;
        }
        case "SHRINK": {
          const value =
            parseInt(
              _.get(settings, "properties.fontSize", "6pt").replace("pt")
            ) - 5;
          updateComponentSettings(
            settings.id,
            {
              ...settings,
              iconStyle: { ...settings.iconStyle, fontSize: `${value}pt` },
            },
            true,
            0
          );
          break;
        }
        default: {
          updateComponentSettings(
            settings.id,
            {
              ...settings,
              iconStyle: { ...settings.iconStyle, fontSize: `${e}pt` },
            },
            true,
            0
          );
        }
      }
    },
  });

  const withColor = updateSection(withSize, SectionTypes.COLORPICKER, {
    onChange: (e) => {
      updateComponentSettings(
        settings.id,
        {
          ...settings,
          iconStyle: { ...settings.iconStyle, color: e.hex },
        },
        true,
        0
      );
    },
  });

  const updatedProperties = {
    ...properties,
    main: { ...properties.main, sections: withColor },
  };

  return (
    <PropertiesBuilder
      {...props}
      title="List Item Settings"
      data={updatedProperties}
    />
  );
};

export const ListItemComponent: React.FC<PluginProps> = (props) => {
  const { id, mode, settings, match } = props;
  const properties = convertProperties(settings.properties);
  const buttonList = ["bold", "italic", "underline"];

  return (
    <>
      <V1ObjectWrapper settings={settings}>
        <EditorObject {...props} PropertiesView={Properties}>
          <ListItem {...settings} properties={properties} mode={mode}>
            <RichEditor
              {...props}
              position="top"
              buttonList={buttonList}
              content={_.get(settings, "html", "Enter Content Here")}
              disabled={_.get(match, "path", "").indexOf("preview") > -1}
            />
          </ListItem>
        </EditorObject>
      </V1ObjectWrapper>
    </>
  );
};