import * as React from "react";
import { get } from "lodash";
// import { EditorMode } from "@sc/modules/v2/Editor/types";
import { V1ObjectWrapper, convertProperties } from "../V1ObjectWrapper";
import { PluginProps, ListProps } from "./types";

import { ListItem } from "..";
import { ComponentTypes } from "../types";
import { IconTypes } from "../Icon";

export const List: React.FC<ListProps> = ({
  children,
  data = [],
  icon,
  iconSource,
  iconStyle,
  contentStyle,
  style,
}) => {
  if (children)
    return (
      <ul
        data-testid="WC-LIST-LIVE"
        style={{ listStyleType: "none", ...style }}
      >
        {children}
      </ul>
    );

  return (
    <ul
      data-testid="WC-LIST-LIVE"
      style={{ listStyleType: "none", padding: 0, ...style }}
    >
      {data.map((itm) => {
        // const { style } = itm;
        return (
          <ListItem
            style={get(itm, "style", style)}
            iconStyle={{
              fontSize: get(style, "fontSize", "inherit"),
              color: get(style, "color", "inherit"),
              ...get(itm, "iconStyle", iconStyle),
            }}
            iconSource={get(itm, "iconSource", iconSource)}
            contentStyle={get(itm, "contentStyle", contentStyle)}
            icon={get(itm, "icon", icon)}
          >
            <span dangerouslySetInnerHTML={{ __html: itm.caption }} />
          </ListItem>
        );
      })}
    </ul>
  );
};

const ListPlugin: React.FC<PluginProps> = ({ settings }) => {
  const properties = convertProperties(settings.properties);
  return (
    <V1ObjectWrapper settings={settings}>
      <List {...settings} properties={properties} />
    </V1ObjectWrapper>
  );
};

export const onComponentRender = (hook, payload, actions) => {
  if (hook.id === "webcomponent" && payload.type === ComponentTypes.LIST) {
    return [ListPlugin];
  }
};

export default List;