import PropTypes from "prop-types";
import React, { Component } from "react";
import * as Buttons from "./AllButtons";
import {
  ButtonAlignGroup,
  ButtonColorGroup,
  ButtonFontGroup,
  ButtonLinkGroup
} from "./ButtonGroups";

class InlineControlButton extends Component {
  constructor() {
    super();
    this.doToggle = this.doToggle.bind(this);
  }

  doToggle(e) {
    this.props.onToggle(this.props.style);
  }

  render() {
    const { type } = this.props;

    if (type === "settings")
      return <Buttons.Settings onClick={this.doToggle} />;
    if (type === "duplicate")
      return <Buttons.Duplicate onClick={this.doToggle} />;
    if (type === "delete") return <Buttons.Delete onClick={this.doToggle} />;
    if (type === "close") return <Buttons.Close onClick={this.doToggle} />;

    if (type === "color") return <Buttons.Color onClick={this.doToggle} />;
    if (type === "upload") return <Buttons.Upload onClick={this.doToggle} />;
    if (type === "spacer") return <Buttons.Spacer onClick={this.doToggle} />;
    if (type === "bold") return <Buttons.Bold onClick={this.doToggle} />;
    if (type === "italic") return <Buttons.Italic onClick={this.doToggle} />;
    if (type === "underline")
      return <Buttons.Underline onClick={this.doToggle} />;
    if (type === "textStyle")
      return <Buttons.TextStyle onClick={this.doToggle} />;
    if (type === "textAlign")
      return <Buttons.TextAlign onClick={this.doToggle} />;
    if (type === "textAlignLeft")
      return <Buttons.TextAlignLeft onClick={this.doToggle} />;
    if (type === "textAlignRight")
      return <Buttons.TextAlignRight onClick={this.doToggle} />;
    if (type === "textAlignCenter")
      return <Buttons.TextAlignCenter onClick={this.doToggle} />;
    if (type === "link") return <Buttons.Link onClick={this.doToggle} />;
    if (type === "list") return <Buttons.List onClick={this.doToggle} />;
    if (type === "listBullet")
      return <Buttons.ListBullet onClick={this.doToggle} />;
    if (type === "listNumbers")
      return <Buttons.ListNumbers onClick={this.doToggle} />;
    if (type === "objAlignLeft")
      return <Buttons.ObjAlignLeft onClick={this.doToggle} />;
    if (type === "objAlignRight")
      return <Buttons.ObjAlignRight onClick={this.doToggle} />;
    if (type === "objAlignCenter")
      return <Buttons.ObjAlignCenter onClick={this.doToggle} />;

    if (type === "textAlignGroup")
      return <ButtonAlignGroup onClick={this.doToggle} />;
    if (type === "linkGroup")
      return <ButtonLinkGroup onClick={this.doToggle} />;
    if (type === "colorGroup")
      return <ButtonColorGroup onClick={this.doToggle} />;
    if (type === "fontGroup")
      return <ButtonFontGroup onClick={this.doToggle} />;

    return <Buttons.Custom {...this.props} />;
  }
}

InlineControlButton.propTypes = {
  /** Which component to show/hide when button is toggled */
  componentToReveal: PropTypes.element,
  /** Boolean if the button should show as active or not.  For example, if the text is currently underlined, isActive = true */
  isActive: PropTypes.bool.isRequired
};

InlineControlButton.defaultProps = {
  type: "custom",
  isActive: false
};

export default InlineControlButton;