import React from 'react';
import moment from 'moment';
import lodashGet from 'lodash/get';

import useSheet from '../../services/jss';

import DropdownSelector from '../dropdown-selector/DropdownSelectorComponent.jsx';

const { PropTypes } = React;

const styles = {
  content: {
    color: '#4a4a4a',
  },
  selectorWrapper: {
    display: 'inline-block',
    width: '40%',
    verticalAlign: 'top',
    position: 'relative',
    '&:first-child': {
      width: '25%'
    },
    '&:last-child': {
      width: '25%'
    },
  },
  dateSelector: {
    display: 'block',
  },
  placeHolderPrefix: {
    color: '#9b9b9b',
  },
};

const yearLowerBound = 1930;

export class DateSelector extends  React.PureComponent {
  constructor(props) {
    super(props);

    this.mapToSelectorContent = this.mapToSelectorContent.bind(this);
    this.notifySubscribers = this.notifySubscribers.bind(this);
    this.getDaysUntil = this.getDaysUntil.bind(this);
    this.onDateChange = this.onDateChange.bind(this);
    this.getDaysUntil = this.getDaysUntil.bind(this);
    this.getMonthsUntil = this.getMonthsUntil.bind(this);
    this.getYearsUntil = this.getYearsUntil.bind(this);
    this.getMonths = this.getMonths.bind(this);
    this.getYears = this.getYears.bind(this);
    this.getDays = this.getDays.bind(this);

    const now = moment();
    let currMoment = now;
    let placeHolders;

    if (props.activeDate) {
      currMoment = moment(props.activeDate, 'DD-MMM-YYYY');
      placeHolders = this.setPlaceHolders(currMoment);
    }

    const months = this.getMonths(currMoment);
    const years = this.getYears();
    const days = this.getDays(currMoment);

    this.state = {
      currMoment,
      months,
      years,
      days,
      ...placeHolders,
    }
  }

  setPlaceHolders(currMoment) {

    this.dateSelected = true;
    this.yearSelected = true;
    this.monthSelected = true;

    return {
      dateValue: {
        label: currMoment.date(),
      },
      monthValue: {
        label: currMoment.format('MMMM'),
      },
      yearValue: {
        label: currMoment.format('YYYY'),
      },
    }
  }

  getDays(currMoment) {
    const now = moment();

    const isBefore = currMoment.isBefore(now, 'year') || currMoment.isBefore(now, 'month');
    const daysCount = isBefore ? currMoment.daysInMonth() : now.date();

    return this.getDateEntities(this.getDaysUntil, daysCount);
  }

  getYears() {
    return this.getDateEntities(this.getYearsUntil, moment().year());
  }

  getMonths(currMoment) {
    const defaultMonthsToGenerate = 11;
    const now = moment();

    const isBefore = currMoment.isBefore(now, 'year');

    const monthsCount = isBefore ? defaultMonthsToGenerate : now.month();

    return this.getDateEntities(this.getMonthsUntil, monthsCount);
  }


  getDateEntities(datesGenerator, date) {
    return datesGenerator(date).map(this.mapToSelectorContent);
  }

  mapToSelectorContent(content) {
    return {
      label: content,
      style: this.props.sheet.classes.content,
    };
  }

  getDaysUntil(day) {
    return this.generateWith(day, (v,i) => i + 1);
  }

  getMonthsUntil(months) {
    return this.generateWith(months+1, (x,i) => moment.months(i));
  }

  getYearsUntil(year) {
    const size = year - yearLowerBound + 1;

    return this.generateWith(size, (x,i) => i + yearLowerBound);
  }

  generateWith(size, generateFunc) {
    return Array.from(
      new Array(size),
      generateFunc
    );
  }

  onDateChange(name, value) {
    const { currMoment } = this.state;
    const newType = value.label;
    const newMoment = currMoment[name](newType);

    this[`${name}Selected`] = true;

    const months = this.getMonths(currMoment);
    const days = this.getDays(currMoment);

    const newDate = newMoment.date();
    if (days.length < newDate) newMoment.date(days.length);

    const newMonth = newMoment.month();
    if (months.length < newMonth + 1) newMoment.month(months.length-1);

    this.setState({
      months,
      days,
      newMoment,
      yearValue: { label: newMoment.format('YYYY') },
      dateValue: { label: newMoment.format('D') },
      monthValue: { label: newMoment.format('MMMM') },
    });
  }

  notifySubscribers(newMoment) {
    const { dateSelected, monthSelected, yearSelected } = this;

    if (dateSelected && monthSelected && yearSelected) {
      this.props.onValueChange(newMoment);
    }
  }


  render() {
    const { classes } = this.props.sheet;

    return (
      <div className={classes.dateSelector}>
        <div className={classes.selectorWrapper}>
          <DropdownSelector
            placeHolderPrefixCls={classes.placeHolderPrefix}
            placeholder="Day"
            isAbsolutePositionedMenu
            name="date"
            value={this.state.dateValue}
            options={this.state.days}
            onChange={this.onDateChange}
          />
        </div>
        <div className={classes.selectorWrapper}>
          <DropdownSelector
            placeHolderPrefixCls={classes.placeHolderPrefix}
            placeholder="Month"
            isAbsolutePositionedMenu
            name="month"
            value={this.state.monthValue}
            options={this.state.months}
            onChange={this.onDateChange}
          />
        </div>
        <div className={classes.selectorWrapper}>
          <DropdownSelector
            value={this.state.yearValue}
            placeHolderPrefixCls={classes.placeHolderPrefix}
            placeholder="Year"
            isAbsolutePositionedMenu
            name="year"
            options={this.state.years}
            onChange={this.onDateChange}
          />
        </div>
      </div>
    );
  }
}

DateSelector.propTypes = {
  onValueChange: PropTypes.func,
};

export default useSheet(styles)(DateSelector);