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

import { ListItem } from "..";
import { ComponentTypes } from "../types";
import { IconTypes } from "../Icon";
import { Links } from "./Links";
import { EditorMode } from "@sc/modules/v2/Editor/types";

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

  // display: "inline-block",
  return (
    <div
      data-testid="WC-NAVIGATION-LIVE"
      style={{
        listStyleType: "none",
        padding: 0,
        ...style,
      }}
    >
      <Links
        items={data.map((itm) => ({ ...itm, type: itm.linkDisplayType }))}
        linkStyle={{ padding: 5 }}
        mode={EditorMode.LIVE}
      />
    </div>
  );
};

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

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

export default Navigation;