import React from 'react';
import cn from 'classnames';

import Icon from '../icons';
import './scss/input.scss';

export default class Input extends React.Component {
  static defaultProps = {
    inputState: 'default',
    disabled: false,
    label: false,
    multiline: false,
    type: 'text',
    startAdornment: false,
    endAdornment: false,
    loading: false,
    value: '',
    rows: 3,
    iref: () => null,
  }

  constructor(props) {
    super(props);
    this.state = {
      /* inputState: props.inputState,
      disabled: props.disabled,
      label: props.label,
      multiline: props.multiline,
      type: props.type,
      startAdornment: props.startAdornment,
      endAdornment: props.endAdornment,
      loading: props.loading, */
      value: props.value,
      hovered: false,
    };
  }

  componentDidUpdate(prevProps, prevState) {
    /* const { value } = this.props;
    if (value !== prevProps.value) {
      this.setState({ value });
    } */
  }

  stateToIcon = (state) => {
    const stateToIconMap = {
      default: null,
      error: 'error',
      checked: 'check',
    };
    return stateToIconMap[state] ? stateToIconMap[state] : null;
  }

  handleChange = (e) => {
    const { onChange } = this.props;
    if (onChange) {
      onChange(e);
    }
    /* this.setState({ value: e.target.value }); */
  }

  renderInput = () => {
    const { /* value, */ hovered } = this.state;
    const {
      inputState, disabled, type, placeholder, loading, iref, restAttributes, value,
    } = this.props;
    const classes = cn({
      'omni-input__input': true,
      'omni-input_disabled': !!disabled,
      'omni-input_hovered': !disabled && hovered,
    });
    return (
      <>
        <input
          onChange={this.handleChange}
          className={classes}
          type={type}
          disabled={disabled}
          placeholder={placeholder}
          ref={(el) => iref(el)}
          value={value}
          {...restAttributes}
        />
        {this.stateToIcon(inputState) && <Icon
            className={`omni-input__icon omni-input__${inputState}`}
            name={this.stateToIcon(inputState)}
        />}
      </>
    );
  }

  renderTextArea = () => {
    const { disabled/* , value */ } = this.state;
    const {
      placeholder, onChange, rows, iref, events, restAttributes, value,
    } = this.props;
    const classes = cn({
      'omni-input__input': true,
    });
    return (
      <textarea
        onChange={this.handleChange}
        className={classes}
        disabled={disabled}
        placeholder={placeholder}
        ref={(el) => iref(el)}
        rows={rows}
        value={value}
        {...restAttributes}
      />
    );
  }

  render() {
    const { hovered } = this.state;
    const {
      inputState, startAdornment, endAdornment, multiline, disabled, tip,
    } = this.props;
    const inputClasses = cn({
      'omni-ui-general': true,
      'omni-input': true,
      'omni-input_disabled': !!disabled,
      'omni-input_hovered': !disabled && hovered,
      [`omni-input_${inputState}`]: true,
    });
    const tipClasses = cn({
      'omni-input__tip': true,
      [`omni-input__${inputState}`]: !!inputState,
    });
    const tipItem = tip && typeof tip === 'string'
      ? <span className={tipClasses}>{tip}</span>
      : tip;
    return (
      <>
      <div
        className={inputClasses}
        onMouseOver={() => this.setState({ hovered: true })}
        onMouseOut={() => this.setState({ hovered: false })}
      >
        {!!startAdornment && <div
            className='omni-input__abdornment omni-input__adornment_start'
          >
            {startAdornment}
          </div>}
        {multiline ? this.renderTextArea() : this.renderInput()}
        {!!endAdornment && <div
          className='omni-input__abdornment omni-input__adornment_end'
        >
          {endAdornment}
        </div>}
      </div>
      {tip && tipItem}
      </>
    );
  }
}