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

import { IconAtom, TextAtom } from "../../atoms";

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

class InputOrganism extends React.PureComponent<any, any> {

  public state = {
    isFocus: false,
    isActive: !!this.props.value,
  };
  private input: HTMLInputElement | HTMLTextAreaElement | null;

  public onFocus = () => {
    this.setState({ isFocus: true });
    if (this.input) {
      this.input.focus();
    }
  }

  public onBlur = () => {
    this.setState({ isFocus: false });
    if (this.props.onBlur) {
      this.props.onBlur();
    }
  }

  public onScroll = () => {
    if (this.input) {
      window.scrollTo({
        top: this.input.offsetTop - 200,
        behavior: "smooth",
      });
    }
  }

  public handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
  ) => {
    this.props.onChange(e);
    this.setState({ isActive: !!e.target.value });
  }

  public render() {
    const { isFocus, isActive } = this.state;
    const {
      value,
      error,
      name,
      placeholder,
      label,
      icon,
      className,
      type = "text",
      disabled,
      height,
      required,
      onKeyUp = () => {},
    } = this.props;

    return (
      <div
        className={`${className} flex flex-column justify-center align-center`}
        css={this.props.css}
      >
        <div
          role="button"
          onClick={this.onFocus}
          tabIndex={0}
          onKeyPress={this.onFocus}
          onFocus={this.onFocus}
          className="w-100 ph3 pv1 br3 flex flex-row align-start outline-0"
          css={css`
            background: ${COLORS.WHITE.NORMAL};
            cursor: ${disabled ? "not-allowed" : "pointer"};
            border: 1px solid
              ${error
                ? "#EB5757"
                : isFocus && !disabled
                ? "#645AFF"
                : "#E8EDF2"};
            transition: all 0.5s ease;
            height: ${type === "textarea" ? height || "auto" : "48px"};
            @media screen and (min-width: 30em) {
              height: ${type === "textarea" ? height || "auto" : "56px"};
            }
          `}
        >
          {icon && (
            <IconAtom
              name={icon}
              className="self-center"
              css={css`
                transition: 0.2s;
                color: ${COLORS.BLACK.LIGHT};
              `}
            />
          )}
          <div className="w-100 ml2 flex flex-column justify-start align-start">
            <TextAtom
              size={isFocus || isActive ? "XS" : "M"}
              className="bg-white ph2 self-start"
              css={css`
                transition: all 0.4s ease;
                color: ${error
                  ? "#EB5757"
                  : isFocus && !disabled
                  ? "#645AFF"
                  : "#8393A3"};
                transform: translateY(${isFocus || isActive ? -12 : 12}px);
                @media screen and (min-width: 30em) {
                  transform: translateY(${isFocus || isActive ? -13 : 13}px);
                }
              `}
            >
              {required && (isFocus || isActive)
                ? label
                : !required
                ? label
                : `* ${label}`}
            </TextAtom>
            {type !== "textarea" && (
              <input
                ref={(input) => {
                  this.input = input;
                }}
                type={type}
                className="w-100 ph2 outline-0 bn"
                css={css`
                  ::placeholder {
                    color: ${COLORS.BLACK.LIGHT};
                    opacity: 1;
                  }
                  font-size: 0.8rem;
                  cursor: ${disabled ? "not-allowed" : "auto"};
                  background: transparent;
                  opacity: ${isFocus || isActive ? "1" : "0"};
                  height: ${height || "auto"};
                  transition: all 0.4s ease;
                  margin-top: -0.5px;
                  transform: translateY(${isFocus || isActive ? -2 : 0}px);
                  @media screen and (min-width: 30em) {
                    font-size: 1rem;
                    margin: 0;
                  }
                  color: ${COLORS.BLACK.DARKER};
                  background: ${COLORS.WHITE.NORMAL};
                `}
                onKeyUp={onKeyUp}
                name={name}
                value={value}
                placeholder={placeholder}
                onChange={this.handleChange}
                onBlur={this.onBlur}
                disabled={disabled}
                data-test={this.props["data-test"]}
                style={{ color: `${COLORS.BLACK.DARKER}` }}
              />
            )}
            {type === "textarea" && (
              <textarea
                ref={(input) => {
                  this.input = input;
                }}
                className="w-100 ph2 outline-0 bn"
                css={css`
                    font-size: 0.8rem;
                    cursor: ${disabled ? "not-allowed" : "auto"};
                    background: transparent;
                    opacity: ${isFocus || isActive ? "1" : "0"};
                    height: ${height || "auto"};
                    transition: all 0.4s ease;
                    margin-top: -0.5px;
                    transform: translateY(${isFocus || isActive ? -2 : 0}px);
                    @media screen and (min-width: 30em) {
                      font-size: 1rem;
                      margin: 0;
                    }
                    color: ${COLORS.BLACK.DARKER};
                    background: ${COLORS.WHITE.NORMAL};
                `}
                name={name}
                value={value}
                placeholder={placeholder}
                onChange={this.handleChange}
                onKeyUp={onKeyUp}
                onBlur={this.onBlur}
                disabled={disabled}
                data-test={this.props["data-test"]}
                style={{ color: `${COLORS.BLACK.DARKER}` }}
              />
            )}
          </div>
          {error && (
            <IconAtom
              name="exclamation-circle"
              className="f3 self-center"
              css={css`
                color: ${COLORS.RED.NORMAL};
              `}
            />
          )}
        </div>
        <div className="mt2 mb2">
          {error && (
            <TextAtom
              size="S"
              className="self-center"
              css={css`
                color: #eb5757;
              `}
            >
              {error}
            </TextAtom>
          )}
        </div>
      </div>
    );
  }
}

export { InputOrganism };