import React, { Component } from 'react';
import PropTypes from 'prop-types';
import omit from 'lodash.omit';
import classNames from 'classnames';
import { SingleDatePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';

import '../base';
import styles from './DatepickerSingle.styl';
import Label from './Label';
import newId from '../utils/newId';

export default class DatepickerSingle extends Component {
  constructor(props) {
    super(props);

    this.state = {
      date: props.date || null,
      focused: props.focused || false
    };

    this.onDateChange = this.onDateChange.bind(this);
    this.onFocusChange = this.onFocusChange.bind(this);
    this.disableReadonly = this.disableReadonly.bind(this);
  }

  componentWillMount() {
    this.id = newId();
  }

  componentDidMount() {
    // this is a hack to get a readonly input field
    document.getElementById(this.id).readOnly = true;
  }

  // in case props are changing, update the state
  componentWillReceiveProps(nextProps) {
    const { date, focused } = nextProps;
    this.setState({
      date: date || null,
      focused: focused || false
    });
  }

  onDateChange(date) {
    this.setState({ date });

    this.props.onDateChange(date);
    this.disableReadonly();
  }

  onFocusChange({ focused }) {
    this.setState({ focused });
    this.disableReadonly();
  }

  disableReadonly() {
    const { enforceReadonly, readonly, toggleReadonly } = this.props;
    if (!enforceReadonly && readonly && toggleReadonly) {
      toggleReadonly();
    }
  }

  render() {
    const { date, focused } = this.state;
    const {
      name,
      label,

      error,
      success,
      warning,
      info,

      readonly,
      enforceReadonly
    } = this.props;

    const wrapperClasses = classNames({
      [styles.wrapper]: true,
      [styles.readonly]: readonly,
      [styles.enforceReadonly]: enforceReadonly,
      [styles.error]: !!error,
      [styles.warning]: !!warning,
      [styles.info]: !!info,
      [styles.success]: !!success,
      [styles.labelOffset]: label
    });

    return (
      <div className={wrapperClasses}>
        {!!label && (
          <Label
            htmlFor={name}
            {...{ error, warning, info, success }}
          >
            {label}
          </Label>
        )}
        <SingleDatePicker
          {...omit(this.props, [
            'input',
            'meta',
            'label',
            'timezone',
            'readonly',
            'enforceReadonly',
            'toggleReadonly',
            'error',
            'warning',
            'info',
            'success',
            'setHourMinuteSecond'
          ])}
          id={this.id}
          date={date}
          focused={focused}
          onDateChange={this.onDateChange}
          onFocusChange={this.onFocusChange}
          showClearDate
        />
      </div>
    );
  }
}

DatepickerSingle.defaultProps = {
  displayFormat: 'DD.MM.YYYY',
  showClearDate: true,
  numberOfMonths: 1
};

DatepickerSingle.propTypes = {
  displayFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
  showClearDate: PropTypes.bool,
  numberOfMonths: PropTypes.number,
  date: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.string
  ]),
  onDateChange: PropTypes.func,
  label: PropTypes.string,
  error: PropTypes.string,
  warning: PropTypes.bool,
  info: PropTypes.bool,
  success: PropTypes.bool,
  readonly: PropTypes.bool,
  enforceReadonly: PropTypes.bool,
  toggleReadonly: PropTypes.func
};

DatepickerSingle.defaultProps = {
  date: undefined,
  onDateChange: undefined,
  label: undefined,
  error: undefined,
  warning: undefined,
  info: undefined,
  success: undefined,
  readonly: undefined,
  enforceReadonly: undefined,
  toggleReadonly: undefined
};