import React, { PureComponent } from 'react';
import { Components, registerComponent } from 'meteor/vulcan:core';
import moment from 'moment';

const isEmptyValue = value =>
  typeof value === 'undefined' ||
  value === null ||
  value === '' ||
  (Array.isArray(value) && value.length === 0);

class DateComponent2 extends PureComponent {
  state = {
    year: null,
    month: null,
    day: null,
  };

  updateDate = date => {
    const { value, path } = this.props;
    let newDate;
    this.setState(date, () => {
      const { year, month, day } = this.state;
      if (isEmptyValue(value)) {
        if (year && month && day) {
          // wait until we have all three values to update the date
          newDate = moment()
            .year(year)
            .month(month)
            .date(day);
          this.props.updateCurrentValues({ [path]: newDate.toDate() });
        }
      } else {
        // update current date
        newDate = moment(this.props.value);
        if (year) newDate.year(year);
        if (month) newDate.month(month);
        if (day) newDate.date(day);
        this.props.updateCurrentValues({ [path]: newDate.toDate() });
      }
    });
  };

  render() {
    const { path, value } = this.props;
    const months = moment.months();
    const mDate = !isEmptyValue(value) && moment(value);

    const monthProperties = {
      label: 'Month',
      name: `${path}.month`,
      layout: 'vertical',
      options: months.map((m, i) => ({ label: m, value: m })),
      value: (mDate && mDate.format('MMMM')) || '',
      onChange: (name, value) => {
        this.updateDate({ month: value });
      },
    };

    const dayProperties = {
      label: 'Day',
      name: `${path}.day`,
      layout: 'vertical',
      maxLength: 2,
      value: (mDate && mDate.format('DD')) || '',
      onBlur: e => {
        this.updateDate({ day: e.target.value });
      },
    };

    const yearProperties = {
      label: 'Year',
      name: `${path}.year`,
      layout: 'vertical',
      maxLength: 4,
      value: (mDate && mDate.format('YYYY')) || '',
      onBlur: e => {
        this.updateDate({ year: e.target.value });
      },
    };

    return (
      <Components.FormItem {...this.props.inputProperties}>
        <div>
          <div>
            <Components.FormComponentSelect
              inputProperties={monthProperties}
              datatype={[{ type: String }]}
            />
          </div>
          <div style={{ marginLeft: 10, width: 60 }}>
            <Components.FormComponentText inputProperties={dayProperties} />
          </div>
          <div style={{ marginLeft: 10, width: 80 }}>
            <Components.FormComponentText inputProperties={yearProperties} />
          </div>
        </div>
      </Components.FormItem>
    );
  }
}

export default DateComponent2;

registerComponent('FormComponentDate2', DateComponent2);