import _ from "lodash";
import Radium from "radium";
import React from "react";
import { Button as RMDButton, FontIcon } from "react-md";
import { Cell, Grid } from "..";
import style, { getBackgroundColor } from "./style";

/**
 * This component lets you display a button on the page with various features such as,
 * a icons, floating, colored, etc.
 * @param {object} props The props
 * @returns {function} The component
 */
const Button = props => {
  const bStyle = getBackgroundColor(props);
  const btnSizeStyle = props.small && !props.large ? style.smallSize : null;
  const btnSizeTextStyle =
    props.small && !props.large ? style.smallTextSize : null;

  if (props.icon) {
    let fixedPosition;
    if (props.fixedPosition === "BOTTOM_RIGHT") fixedPosition = "br";
    else if (props.fixedPosition === "TOP_RIGHT") fixedPosition = "tr";
    else if (props.fixedPosition === "TOP_LEFT") fixedPosition = "tl";
    else if (props.fixedPosition === "BOTTOM_LEFT") fixedPosition = "bl";
    return (
      <RMDButton
        {..._.omit(props, ["transparent", "large", "small"])}
        transparent={props.transparent ? "true" : undefined}
        small={props.small ? props.small.toString() : undefined}
        large={props.large ? true : undefined}
        fixedPosition={fixedPosition}
        style={{
          ...style.iconButton,
          ...props.style,
          ...bStyle,
          ...(fixedPosition === "br" ? { bottom: 100, right: 25 } : {})
        }}
      >
        {props.children}
      </RMDButton>
    );
  }

  return (
    <button
      {..._.omit(props, [
        "large",
        "secondary",
        "primary",
        "small",
        "transparent",
        "icon",
        "tertiary",
        "iconLeft"
      ])}
      style={{ ...style.button, ...btnSizeStyle, ...props.style, ...bStyle }}
    >
      <Grid justify="space-between">
        {props.iconLeft ? (
          <Cell align="center">
            <FontIcon style={{ ...style.iconLeft, ...props.style }}>
              {props.iconLeft}
            </FontIcon>
          </Cell>
        ) : null}
        {props.iconRight ? (
          <Cell align="center" order={1}>
            <FontIcon style={{ ...style.iconRight, ...props.style }}>
              {props.iconRight}
            </FontIcon>
          </Cell>
        ) : null}
        <Cell align="center">
          <span style={{ ...style.text, ...props.style, ...btnSizeTextStyle }}>
            {props.children}
          </span>
        </Cell>
      </Grid>
    </button>
  );
};

Button.defaultProps = {
  small: true,
  large: false,
  // transparent: false,
  icon: false
};

export default Radium(Button);