class OutlineInput extends React.Component {
  static defaultProps = {
    type: 'text',
  };
  
  constructor(props) {
    super(props);
    this.focusField = this.focusField.bind(this);
    this.onFocus = this.onFocus.bind(this);
    this.onBlur = this.onBlur.bind(this);
    this.updateValue = this.updateValue.bind(this);
    this.getStyleClasses = this.getStyleClasses.bind(this);
    this.placeholderLabel = this.placeholderLabel.bind(this);
    this.showHintContainer = this.showHintContainer.bind(this);
    this.setLabelWidthStyleProperty = this.setLabelWidthStyleProperty.bind(this);
    this.setError = this.setError.bind(this);
    this.state = {
      focused: false,
      value: this.props ? this.props.value : null,
      errorMessage: this.props ? this.props.errorMessage : null,
    };
    this.container = React.createRef();
    this.floatingLabel = React.createRef();
    this.inputField = React.createRef();
    window.addEventListener('resize', this.setLabelWidthStyleProperty);
  }

  componentDidMount() {
    this.setLabelWidthStyleProperty();
    this.updateValidity();
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.setLabelWidthStyleProperty);
  }

  focusField() {
    if (!this.inputField.current) {
      return;
    }
    this.inputField.current.focus();
  }

  onFocus() {
    this.setState({
      focused: true,
    });
    this.setLabelWidthStyleProperty();
  }

  onBlur() {
    this.setState({
      focused: false,
    });
  }

  setLabelWidthStyleProperty() {
    if (this.floatingLabel.current) {
      let dims = this.floatingLabel.current.getBoundingClientRect();
      this.container.current.style.setProperty('--label-active-width', `${dims.width}px`);
    } else {
      this.container.current.style.setProperty('--label-active-width', 0);
    }
  }

  placeholderLabel() {
    if (this.props.floatingLabel) {
        return this.state.focused ? this.props.placeholder : null;
    }
    return this.props.placeholder;
  }

  updateValue(e) {
    this.setState({
      value: e.target.value,
    }, () => this.updateValidity());
  }

  updateValidity() {
    if (!this.inputField.current) {
        return;
    }
    this.setState({
      valid: this.inputField.current.checkValidity(),
    });
  }

  getStyleClasses() {
    let classes = [];
    if (this.props.floatingLabel) {
      classes.push('_floating-label');
    }
    if (this.props.leadingIcon) {
      classes.push('_leading-icon');
    }
    if (this.props.trailingIcon) {
      classes.push('_trailing-icon');
    }
    if (!this.state.valid) {
      classes.push('_invalid');
    }
    if (this.state.value) {
      classes.push('_has-value');
    }
    if (this.state.focused) {
      classes.push('_focused');
    }
    return classes.join(' ');
  }

  showHintContainer() {
    return this.state.errorMessage || this.props.helperText || this.props.charCounter;
  }

  setError(errorMessage) {
    if (!this.inputField.current) {
      return;
    }
    this.inputField.current.setCustomValidity(errorMessage);
    this.setState({
      valid: false,
      errorMessage,
    });
  }
  
  render() {
    return (<div className="outline-input" ref={this.container}>
        <div className={`field-wrapper ${this.getStyleClasses()}`} onClick={this.focusField}>
          {this.props.floatingLabel ? <label className="floating">{this.props.floatingLabel}</label> : null}
          {this.props.floatingLabel ? <label ref={this.floatingLabel} className="floating reference" style={{ opacity: 0, pointerEvents: 'none', visibility: 'hidden', zIndex: -9999999999 }}>{this.props.floatingLabel}</label> : null}
          {this.props.leadingIcon ? <MaterialIcon className='leading' type="outlined" name={this.props.leadingIcon} /> : null}
          <input
            ref={this.inputField}
            type={this.props.type}
            minLength={this.props.minLength}
            maxLength={this.props.maxLength}
            min={this.props.min}
            max={this.props.max}
            placeholder={this.placeholderLabel()}
            value={this.state.value}
            onChange={this.updateValue}
            onFocus={this.onFocus}
            onBlur={this.onBlur} />
          {this.props.trailingIcon ? <MaterialIcon className='leading' type="outlined" name={this.props.trailingIcon} /> : null}
          <div className="borders">
            <div className="border left" />
            <div className="middle">
              <div className="top-borders">
                <div className="border start" />
                <div className="border end" />
              </div>
              <div className="border bottom" />
            </div>
            <div className="border right" />
          </div>
        </div>
        {this.showHintContainer() ? <div className="hints">
          {this.state.errorMessage || this.props.helperText ? <div className="messages">
            {!this.state.valid && this.state.errorMessage ? <div className="error">{this.state.errorMessage}</div> : null}
              {this.state.valid && this.props.helperText ? <div className="helper">{this.props.helperText}</div> : null}
          </div> : null}
          {this.props.maxLength ? <div className="char-counter">{this.state.value ? this.state.value.length : 0}/{this.props.maxLength}</div> : null}
        </div> : null}
      </div>);
  }
}

class MaterialIcon extends React.Component {
 
  constructor(props) {
    super(props);
    this.getType = this.getType.bind(this);
  }
  
  getType() {
    let types = {
      twoTone: 'two-tone',
      outlined: 'outlined',
      round: 'round',
      sharp: 'sharp',
    };
    return types[this.props.type] || '';
  }
  
  render() {
    return (<i className={`material-icons${this.getType() ? `-${this.getType()}` : ''} ${this.props.className}`}>{this.props.name}</i>);
  }
}

// Demo
class Application extends React.Component {
  key = 0;
  demoFields = [
    {
      key: this.key++,
      placeholder: 'Basic input',
    },
    {
      key: this.key++,
      floatingLabel: 'Floating label',
      placeholder: 'Secondary placeholder text',
    },
    {
      key: this.key++,
      floatingLabel: 'Example of a super super super super super super super super super super long label',
      placeholder: 'Write your text here',
    },
    {
      key: this.key++,
      floatingLabel: 'Initial value',
      value: 'This is pretty neato',
    },
    {
      key: this.key++,
      floatingLabel: 'This input has an error',
      invalid: true,
    },
    {
      key: this.key++,
      floatingLabel: 'Help me out bro',
      helperText: 'I will show you da wei',
      maxLength: 50,
    },
    {
      key: this.key++,
      floatingLabel: 'Number input',
      type: 'number',
      max: 100,
      helperText: 'Input will become invalid if value is greater than 100',
      errorMessage: 'Value can\'t be greater than 100',
    },
    {
      key: this.key++,
      placeholder: 'Basic input with leading icon',
      leadingIcon: 'local_pizza',
    },
    {
      key: this.key++,
      placeholder: 'Basic input with trailing icon',
      trailingIcon: 'info',
    },
    {
      key: this.key++,
      placeholder: 'Basic input with leading and trailing icons',
      leadingIcon: 'local_pizza',
      trailingIcon: 'info',
    },
    {
      key: this.key++,
      floatingLabel: 'Floating label with leading icon',
      leadingIcon: 'cake',
    },
    {
      key: this.key++,
      floatingLabel: 'Floating label with trailing icon',
      trailingIcon: 'visibility',
    },
    {
      key: this.key++,
      floatingLabel: 'Floating label with leading and trailing icons',
      leadingIcon: 'cake',
      trailingIcon: 'visibility',
    },
  ];
  invalidRefs = [];

  componentDidMount() {
    this.invalidRefs.forEach(ref => {
      ref.setError('You dun fuked up');
    });
  }

  render() {
    let demoFields = this.demoFields.map(field => (
      <OutlineInput {...field} ref={outlineInput => { field.invalid ? this.invalidRefs.push(outlineInput) : null }} />
    ));
    return (
      <React.Fragment>
        {demoFields.map(DemoField => (
          <section>
            <div>{DemoField}</div>
            <div className='dark'>{DemoField}</div>
          </section>
        ))}
      </React.Fragment>
    );
  }
}

ReactDOM.render(
  <Application />,
  document.getElementById('app'),
);