import * as React from "react";
import { get } from "lodash";
import * as MaterialIcon from "@material-ui/icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { ComponentTypes } from "../types";

import { IconTypes, IconProps, IconSource, PluginProps } from "./types";
import { V1ObjectWrapper, convertProperties } from "../V1ObjectWrapper";

export const Icon: React.FC<IconProps> = ({
  style = {},
  properties = {},
  type = IconTypes.Block,
  source = IconSource.MATERIAL,
}) => {
  const IconComponent = MaterialIcon[type];
  return (
    <span
      data-testid="WC-ICON-LIVE"
      style={{
        padding: 0,
        margin: 0,
        border: "none",
        boxShadow: "none",
        background: "transparent",
        // display: "flex",
        // alignItems: "center",
        textAlign: "center",
        ...style,
        ...properties,
      }}
    >
      {source === IconSource.MATERIAL && (
        <IconComponent
          style={{
            ...style,
            ...properties,
            padding: 0,
            border: "none",
            marginTop: 0,
            marginBottom: 0,
            backgroundColor: "transparent",
          }}
        />
      )}
      {source === IconSource.FONTAWESOME && (
        <FontAwesomeIcon
          style={{
            ...style,
            ...properties,
            padding: 0,
            border: "none",
            marginTop: 0,
            marginBottom: 0,
            backgroundColor: "transparent",
          }}
          icon={type}
        />
      )}
    </span>
  );
};

const IconPluginComponent: React.FC<PluginProps> = ({ settings }) => {
  const properties = convertProperties(settings.properties);
  return (
    <V1ObjectWrapper settings={settings}>
      <Icon
        {...settings}
        type={get(settings, "iconType", false)}
        properties={properties}
      />
    </V1ObjectWrapper>
  );
};

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

export { IconTypes, IconSource };

export default Icon;