import PropTypes from "prop-types";
import React from "react";
import InlineControlButton from "./InlineControlButton";

const InlineControls = props => {
  const { showPopup, buttonList, position, currentStyle } = props;

  const style = {
    containerInside: {
      position: "absolute",
      marginTop: position === "top" ? -65 : 0,
      marginBottom: position === "bottom" ? 85 : 0,
      marginLeft: position === "right" ? 150 : 90,
      width: position === "left" || position === "right" ? 120 : "inherit",
      padding: 5,
      background: "#333",
      borderRadius: 8,
      fontSize: 16
    }
  };

  if (showPopup) {
    return (
      <div
        onClick={e => e.stopPropagation()}
        style={style.containerInside}
        className="standard-controls-hover"
      >
        {buttonList.map(type => (
          <InlineControlButton
            onClick={() => console.log(type)}
            type={type}
            key={type}
            active={currentStyle.has(type.style)}
            style={type.toUpperCase()}
            onToggle={props.onToggle}
          />
        ))}
      </div>
    );
  }
  return null;
};

InlineControls.propTypes = {
  /** Boolean if the popup is showing at the moment */
  showPopup: PropTypes.bool.isRequired,
  /** The current location of the inline popup (e.g. top, right, bottom, left, auto, [x,y] offset) */
  position: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.arrayOf(PropTypes.number)
  ]).isRequired,
  /** An array of buttons to display (e.g. settings, duplicate, delete, color, upload, spacer, bold, italic, underline, textStyle, textAlign, textAlignLeft, textAlignRight, textAlignCenter, link, list, listBullet, listNumbers, objAlignLeft, objAlignRight, objAlignCenter) */
  buttonList: PropTypes.array.isRequired
};

InlineControls.defaultProps = {
  showPopup: true,
  position: "left",
  buttonList: ["settings", "duplicate", "delete"]
};

export default InlineControls;