/** @jsx jsx */
import { css, jsx } from "@emotion/core";
import * as React from "react";

// @ts-ignore
import COLORS from "../../constants/colors";

const smallBase = css`
  outline: none;
  border-width: 0;
  border: 0;
  cursor: pointer;
  border-radius: 48px;
  line-height: 20px;
  font-size: 14px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px 8px 16px;
  @media screen and (max-width: 30em) {
    font-size: 12px;
    line-height: 16px;
  }
`;

const defaultBase = css`
  outline: none;
  border-width: 0;
  border: 0;
  cursor: pointer;
  border-radius: 48px;
  line-height: 24px;
  font-size: 16px;
  text-align: center;
  padding: 25px;
  padding-top: 13px;
  padding-bottom: 13px;
  line-height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  @media screen and (max-width: 30em) {
    font-size: 14px;
    line-height: 18px;
  }
`;

const withIconBase = css`
  outline: none;
  border-width: 0;
  border-radius: 48px;
  line-height: 24px;
  font-size: 16px;
  text-align: center;
  padding-top: 13px;
  line-height: 27px;
  @media screen and (max-width: 30em) {
    font-size: 14px;
    line-height: 18px;
  }
`;

const TYPES = {
  SMALL_PRIMARY: css`
    ${smallBase}    
    font-weight: 600;
    font-size: .875rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    cursor: pointer;
    border-width: 0;
    background: ${COLORS.PURPLE.NORMAL};
    color: #F5F7FA;
    :hover {
      background: ${COLORS.PURPLE.LIGHT};
    }
    :active {
      background: ${COLORS.PURPLE.DARKER};
    }
  `,
  SMALL_RED: css`
    ${smallBase}
    font-weight: 600;
    font-size: .875rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    cursor: pointer;
    border-width: 0;
    background: ${COLORS.RED.NORMAL};
    color: ${COLORS.WHITE.NORMAL};
    :hover {
      background: ${COLORS.RED.DARKER};
    }
    :active {
      background: ${COLORS.RED.LIGHT};
    }
  `,
  SMALL_GREEN: css`
    ${smallBase}
    font-weight: 600;
    font-size: .875rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    cursor: pointer;
    border-width: 0;
    background: ${COLORS.GREEN.NORMAL};
    color: ${COLORS.WHITE.NORMAL};
    :hover {
      background: ${COLORS.GREEN.DARKER};
    }
  `,
  SMALL_GREY: css`
    ${smallBase}
    font-weight: 600;
    font-size: .875rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    cursor: pointer;
    border-width: 0;
    background: ${COLORS.GREY.NORMAL};
    color: ${COLORS.BLACK.LIGHT};
    :hover {
      background: ${COLORS.GREY.LIGHT};
    }
  `,
  SMALL_WHITE: css`
    ${smallBase}
    font-weight: 600;
    font-size: .875rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    cursor: pointer;
    border-width: 0;
    background: ${COLORS.WHITE.NORMAL};
    color: ${COLORS.PURPLE.NORMAL};
    :hover {
      background: ${COLORS.WHITE.NORMAL};
    }
  `,
  SMALL_TRANSPARENT: css`
    ${smallBase}
    font-weight: 600;
    font-size: .875rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    cursor: pointer;
    border-width: 0;
    background: transparent;
    color: ${COLORS.PURPLE.NORMAL};
    :hover {
      background: transparent;
    }
  `,
  SMALL_TRANSPARENT_BLACK: css`
    ${smallBase}
    font-weight: 600;
    font-size: .875rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    cursor: pointer;
    border-width: 0;
    background: transparent;
    color: #516172;
    :hover {
      background: transparent;
    }
  `,
  DEFAULT_CTA: css`
    ${defaultBase}  
    font-weight: 600;
    font-size: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    cursor: pointer;
    border-width: 0;
    background: ${COLORS.RED.NORMAL};
    color: ${COLORS.WHITE.NORMAL};
    :hover {
      background: ${COLORS.RED.LIGHT};
    }
    :focus {
      background: ${COLORS.RED.LIGHT};
    }
    :active {
      background: ${COLORS.RED.DARKER};
    }
  `,
  DEFAULT_PRIMARY: css`
    ${defaultBase}
    font-weight: 600;
    font-size: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    cursor: pointer;
    border-width: 0;
    background: ${COLORS.PURPLE.NORMAL};
    color: ${COLORS.WHITE.NORMAL};
    :hover {
      background: ${COLORS.PURPLE.LIGHT};
    }
    :active {
      background: ${COLORS.PURPLE.DARKER};
    }
  `,
  DEFAULT_PURPLE: css`
    ${defaultBase}
    font-weight: 600;
    font-size: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    cursor: pointer;
    border-width: 0;
    background: ${COLORS.PURPLE.NORMAL};
    color: ${COLORS.WHITE.NORMAL};
    :hover {
      background: ${COLORS.PURPLE.LIGHT};
    }
    :active {
      background: ${COLORS.PURPLE.DARKER};
    }
  `,
  DEFAULT_LIGHT: css`
    ${defaultBase}
    font-weight: 600;
    font-size: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    cursor: pointer;
    border-width: 0;
    background: ${COLORS.WHITE.NORMAL};
    color: ${COLORS.BLACK.NORMAL};
    :hover {
      background: ${COLORS.WHITE.LIGHT};
    }
    :active {
      background: ${COLORS.WHITE.LIGHT};
    }
  `,
  DEFAULT_TRANSPARENT: css`
    ${defaultBase}
    font-weight: 600;
    font-size: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    cursor: pointer;
    border-width: 0;
    background: transparent;
    color: ${COLORS.BLACK.NORMAL};
    :hover {
      background: transparent;
    }
    :active {
      background: transparent;
    }
  `,
  DEFAULT_RED: css`
    ${defaultBase}
    font-weight: 600;
    font-size: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    cursor: pointer;
    border-width: 0;
    background: ${COLORS.RED.NORMAL};
    color: ${COLORS.WHITE.NORMAL};
    :hover {
      background: ${COLORS.RED.DARKER};
    }
    :active {
      background: ${COLORS.RED.LIGHT};
    }
  `,
  DEFAULT_PURPLE_GRADIENT: css`
    ${defaultBase}
    font-weight: 600;
    font-size: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    cursor: pointer;
    border-width: 0;
    background: ${COLORS.PURPLE_GRADIENT.NORMAL};
    color: ${COLORS.WHITE.NORMAL};
    :hover {
      background: ${COLORS.PURPLE.LIGHT};
    }
    :active {
      background: ${COLORS.PURPLE.DARKER};
    }
  `,
  DEFAULT_GREY: css`
    ${defaultBase}
    font-weight: 600;
    font-size: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    cursor: pointer;
    border-width: 0;
    background: #EDF0F2;
    color: ${COLORS.BLACK.NORMAL};
    :hover {
      background: ${COLORS.GREY.LIGHT};
    }
  `,
  DEFAULT_WHITE: css`
    ${defaultBase}
    font-weight: 600;
    font-size: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    cursor: pointer;
    border-width: 0;
    background: ${COLORS.WHITE.NORMAL};
    color: ${COLORS.PURPLE.NORMAL};
    :hover {
      background: ${COLORS.WHITE.NORMAL};
    }
  `,
  WITH_ICON_CTA: css`
    ${withIconBase}
    font-weight: 600;
    font-size: .875rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    cursor: pointer;
    border-width: 0;
    background: ${COLORS.RED.NORMAL};
    color: ${COLORS.WHITE.NORMAL};
    :hover {
      background: ${COLORS.RED.LIGHT};
    }
    :active {
      background: ${COLORS.RED.DARKER};
    }
  `,
  WITH_ICON_PRIMARY: css`
    ${withIconBase}
    font-weight: 600;
    font-size: .875rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    cursor: pointer;
    border-width: 0;
    background: ${COLORS.PURPLE.NORMAL};
    color: ${COLORS.WHITE.NORMAL};
    :hover {
      background: ${COLORS.PURPLE.LIGHT};
    }
    :active {
      background: ${COLORS.PURPLE.DARKER};
    }
  `,
  WITH_ICON_GREY: css`
    ${withIconBase}
    font-weight: 600;
    font-size: .875rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    cursor: pointer;
    border-width: 0;
    background: ${COLORS.GREY.NORMAL};
    color: ${COLORS.BLACK.NORMAL};
    :hover {
      background: ${COLORS.GREY.LIGHT};
    }
  `,
  WITH_ICON_WHITE: css`
    ${withIconBase}
    font-weight: 600;
    font-size: .875rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    cursor: pointer;
    border-width: 0;
    background: ${COLORS.WHITE.NORMAL};
    color: ${COLORS.PURPLE.NORMAL};
    :hover {
      background: ${COLORS.WHITE.NORMAL};
    }
  `,
  DISABLED: css`
    font-weight: 600;
    font-size: .875rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    cursor: pointer;
    border-width: 0;
    background: ${COLORS.GREY.NORMAL};
    color: ${COLORS.WHITE.NORMAL};
    opacity: 0.8;
    cursor: not-allowed !important;
    :hover {
      background: ${COLORS.GREY.NORMAL};
    }
  `,
  DISCUSSION_FORUM: css`
    font-weight: 600;
    font-size: .875rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    cursor: pointer;
    border-width: 0;
    background: ${COLORS.WHITE.NORMAL};
    color: ${COLORS.BLACK.LIGHT};
    border-width: 2px;
    border-color: ${COLORS.GREEN.DARKER};
    border-radius: 4px;
    border-style: solid;
    :hover {
      color: ${COLORS.BLACK.NORMAL}
    }
  `,
  GREY_PURPLE_HOVER: css`
    ${smallBase}
    font-weight: 600;
    font-size: .875rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    cursor: pointer;
    border-width: 0;
    background: #E8EDF2;
    color: ${COLORS.BLACK.NORMAL};
    :hover {
      background: ${COLORS.PURPLE.LIGHT};
      color: ${COLORS.WHITE.NORMAL};
    }
    :active {
      background: ${COLORS.PURPLE.DARKER};
    }
  `,
  PURPLE_DARKER: css`
    ${defaultBase}
    font-weight: 600;
    font-size: .875rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    cursor: pointer;
    border-width: 0;
    background: ${COLORS.PURPLE.DARKER};
    color: ${COLORS.WHITE.NORMAL};
    :hover {
      background: ${COLORS.PURPLE.LIGHT};
    }
    :active {
      background: ${COLORS.PURPLE.DARKER};
    }
  `,
  PURPLE_DARKER_OUTLINE: css`
    ${defaultBase}
    font-weight: 600;
    font-size: .875rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    cursor: pointer;
    border-width: 0;
    border: 1px solid ${COLORS.PURPLE.DARKER};
    background: ${COLORS.WHITE.NORMAL};
    color: ${COLORS.PURPLE.DARKER};
    :hover {
      background: ${COLORS.WHITE.NORMAL};
    }
    :active {
      background: ${COLORS.WHITE.NORMAL};
    }
  `,
};

// const disabledClass = cx('fw6 f6 pv2 ph3 pointer bw0', css`
//   ${smallBase}
// `);

const classNames = (type: string, disabled: any) =>
  type.split("_")[0] === "SMALL"
    ? css(
        TYPES[type],
        disabled ? TYPES.DISABLED : "",
      )
    : type.split("_")[0] === "DEFAULT"
    ? css(        
        TYPES[type],
        disabled ? TYPES.DISABLED : "",
      )
    : css(        
        TYPES[type],
        disabled ? TYPES.DISABLED : "",
      );

interface IProps {
  children: any;
  className?: any;
  "data-test"?: any;
  disabled?: boolean;
  isFormInput?: boolean;
  onClick?: any;
  type?: string;
  css?: any;
}

class ButtonAtom extends React.PureComponent<IProps, any> {
  public state = {};

  public render() {
    const {
      isFormInput = false,
      disabled = false,
      type = "SMALL_PRIMARY",
      onClick = () => {},
      className = "",
      children,
    } = this.props;

    return (
      <button
        data-test={this.props["data-test"]}
        type={isFormInput ? "submit" : "button"}
        disabled={disabled}
        onClick={disabled ? () => {} : onClick}
        css={[classNames(type, disabled), this.props.css]}
        className={className}
      >
        {children}
      </button>
    );
  }
}

export { ButtonAtom };