import * as React from "react";
import _ from "lodash";
import reducers from "./reducers";

import { ButtonProps, PluginProps } from "./types";
import { ComponentTypes } from "../types";
import { EditorMode } from "@sc/modules/v2/Editor/types";

import Icon from "../Icon";
import { V1ObjectWrapper, convertProperties } from "../V1ObjectWrapper";

/**
 * A button
 */
export const Button: React.FC<ButtonProps> = (settings) => {
  const {
    caption1,
    caption2,
    caption1style,
    caption2style,
    style,
    properties,
    hoverStyle,
    icon,
    iconSource,
    iconStyle,
    onClick,
    href = "",
    mode = EditorMode.LIVE,
    // dispatch,
    // cKey,
    // fieldValues,
    updateComponentSettings,
    getComponentSettings,
    actions = [],
  } = settings;

  const [isHovering, setIsHovering] = React.useState(false);

  const handleButtonClick = () => {
    console.log("Testing", actions);
    // const { actions } = settings;
    // console.log({ actions });
    if (actions) {
      const doTheseActions = actions.filter((itm) => itm.behavior === "click");
      doTheseActions.forEach((action) =>
        reducers([], {
          ...action,
          settings,
          // settings: { ...settings, cKey, fieldValues },
          updateComponentSettings,
          getComponentSettings,
        })
      );
    }
  };

  const btn = (
    <button
      data-testid="WC-BUTTON-LIVE"
      style={{
        cursor: mode === EditorMode.LIVE ? "pointer" : "grab",
        ...style,
        ...properties,
        ...(isHovering ? hoverStyle : {}),
        display: "flex",
      }}
      // onClick={onClick}
      onClick={handleButtonClick}
      onMouseEnter={() => setIsHovering(true)}
      onMouseLeave={() => setIsHovering(false)}
    >
      {icon && (
        // <div style={{ display: "inline-block", ...iconStyle }}>
        <div style={{ display: "flex", alignSelf: "center" }}>
          <Icon
            type={icon}
            source={iconSource}
            style={{ color: "white", fontSize: "32pt", ...iconStyle }}
          />
        </div>
      )}

      <div
        style={{
          padding: 4,
          width: "100%",
          display: "flex",
          textAlign: "center",
          alignSelf: "center",
        }}
      >
        <div style={{ width: "100%" }}>
          {caption1 && (
            <div style={{ width: "100%", padding: "0 10px", ...caption1style }}>
              {caption1}
            </div>
          )}
          {caption2 && (
            <div style={{ width: "100%", padding: "0 10px", ...caption2style }}>
              {caption2}
            </div>
          )}
        </div>
      </div>
    </button>
  );

  // if (href.length) return <a href={href}>{btn}</a>;
  return btn;
};

const ButtonPlugin: React.FC<PluginProps> = ({
  settings,
  updateComponentSettings,
  getComponentSettings,
}) => {
  const properties = convertProperties(settings.properties);
  return (
    <V1ObjectWrapper settings={settings}>
      <Button
        {...settings}
        updateComponentSettings={updateComponentSettings}
        getComponentSettings={getComponentSettings}
        properties={properties}
      />
    </V1ObjectWrapper>
  );
};

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

// export default connect()(Button);
export default Button;