/// Schedules

/* @flow */

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import autobind from 'autobind-decorator';
import moment from 'moment';
moment.locale('pl');

import { LogoIconSVG, BigAvatarIconSVG } from 'Icons';
import { SCHEDULES_WELCOME as LANGUAGE } from 'Languages';
import { Scrollbars } from 'Modules/react-custom-scrollbars';
import { RSQFlatInput, RSQCheckbox, RSQCheckButton } from 'Utils';

type PropsType = {
  goBackToDepartment: Function,
  onSaveRequest: Function,
};

type StateType = {
  week: Array<{}>
};

class Schedules extends PureComponent<PropsType, StateType> {
  day: Object;
  firstHourPicker: ?Object;
  secondHourPicker: ?Object;
  days: Array<?Object>;

  constructor(props: Object) {
    super(props);
    this.days = [];
  }

  getDayValue(dayIndex: number): Object {
    if (this.days[dayIndex]) return this.days[dayIndex].getValues();
    return {};
  }

  @autobind
  save() {
    this.props.onSaveRequest({
      startDate: this.getFirstPickerValue(),
      endDate: this.getSecondPickerValue(),
      schedules: {
        ...this.getDayValue(0),
        ...this.getDayValue(1),
        ...this.getDayValue(2),
        ...this.getDayValue(3),
        ...this.getDayValue(4),
        ...this.getDayValue(5),
        ...this.getDayValue(6),
      },
    });
  }

  getFirstPickerValue(): ?string {
    if (this.firstHourPicker) return this.firstHourPicker.getDate();
    return null;
  }

  getSecondPickerValue(): ?string {
    if (this.secondHourPicker) return this.secondHourPicker.getDate();
    return null;
  }

  render(): React$Element<'div'> {
    return (
      <div className="welcome-schedules">
        <section className="welcome-schedules__left-part left-part">
          <div className="left-part__top-bar">
            <div className="left-part__top-bar--logo"><LogoIconSVG height="100" width="100"/></div>
            <div className="left-part__top-bar--dude"><BigAvatarIconSVG width="100"/></div>
          </div>
          <section className="welcome-schedules__describe">{LANGUAGE.intro}</section>
        </section>
        <section className="welcome-schedules__schedule schedule">
          <div className="schedule__content content">
            <div className="content__form form">
              <h1 className="form__title">{LANGUAGE.title}</h1>
              <section className="form__container container">
                <Scrollbars>
                  <div className="container__range range">
                    <h3 className="range__title">{LANGUAGE.range}</h3>
                    <div className="range__content">
                      <div className="range__content--date">
                        <RSQFlatInput.DatePicker ref={node => {this.firstHourPicker = node;}} label={LANGUAGE.applyFrom}/>
                      </div>
                      <div className="range__content--date">
                        <RSQFlatInput.DatePicker ref={node => {this.secondHourPicker = node;}} label={LANGUAGE.applyTo}/>
                      </div>
                    </div>
                  </div>
                  <div className="container__schedule schedule">
                    <h3 className="schedule__title">{LANGUAGE.workDays}</h3>
                    {moment.weekdays(true).map((dayName, index) => <Day key={index} ref={node => this.days.push(node)} dayName={dayName} dayIndex={index + 1} />)}
                  </div>
                </Scrollbars>
              </section>

            </div>
            <div className="schedule__buttons buttons">
              <div className="buttons__content">
                <RSQCheckButton
                  onClickFirst={this.props.goBackToDepartment}
                  onClickSecond={this.save}
                  firstName={LANGUAGE.back}
                  secondName={LANGUAGE.save}
                  firstInactive
                  secondActive
                />
              </div>
            </div>
          </div>
        </section>
      </div>
    );
  }
}

type DayPropsType = {
  dayIndex: number;
  dayName: string;
};

type DayStateType = {
  isActive: boolean,
};

class Day extends PureComponent<DayPropsType, DayStateType> {
  checkbox: ?Object;
  timeBoundaryInput: ?Object;
  breaksInput: ?Object;
  slotInput: ?Object;

  constructor(props: Object) {
    super(props);
    this.state = {
      isActive: false,
    };
  }

  @autobind
  onClickActive() {
    this.setState({isActive: !this.state.isActive});
  }

  @autobind
  getValues(): Object {
    return {
      [this.props.dayIndex]: !this.state.isActive ? null : {
        startTime: this.timeBoundaryInput && this.timeBoundaryInput.getFirstPickerValue(),
        endTime: this.timeBoundaryInput && this.timeBoundaryInput.getSecondPickerValue(),
        startBreak: this.breaksInput && this.breaksInput.getFirstPickerValue(),
        endBreak: this.breaksInput && this.breaksInput.getSecondPickerValue(),
        slots: this.slotInput && this.slotInput.getTimePickerValue(),
      },
    };
  }

  render(): React$Element<'div'>  {
    return (
      <div className="schedule__day day">
        <h6 className="day__title">
          <RSQCheckbox isActive={this.state.isActive} onClick={this.onClickActive} white square disableAutoActive/>
          <p className="day__title--text">{this.props.dayName}</p>
        </h6>
        {
          this.state.isActive &&
          [
            <TimeRowInputs ref={node => {this.timeBoundaryInput = node;}} key="1" labelFirst={LANGUAGE.startHour} labelSecond={LANGUAGE.endHour} />,
            <TimeRowInputs ref={node => {this.breaksInput = node;}} key="2" labelFirst={LANGUAGE.breakFrom} labelSecond={LANGUAGE.breakTo} />,
            <TimeRowInputs ref={node => {this.slotInput = node;}} key="3" labelFirst={LANGUAGE.slots} labelSecond={null}/>,
          ]
        }
      </div>
    );
  }
}

Day.propTypes = {
  dayName: PropTypes.string,
  dayIndex: PropTypes.number,
};

type TimeRowInputsPropsType = {
  labelFirst: string,
  labelSecond: ?string,
}

class TimeRowInputs extends PureComponent<TimeRowInputsPropsType> {
  firstPicker: ?Object;
  secondPicker: ?Object;
  timepicker: ?Object;

  @autobind
  getFirstPickerValue(): ?string {
    if (this.firstPicker) return this.firstPicker.getHour();
    return null;
  }

  @autobind
  getSecondPickerValue(): ?string {
    if (this.secondPicker) return this.secondPicker.getHour();
    return null;
  }

  @autobind
  getTimePickerValue(): ?string {
    if (this.timepicker) return this.timepicker.getValue();
    return null;
  }

  render(): React$Element<'div'>  {
    return (
      <div className="day__time">
        {
          this.props.labelSecond ? [
            <div key="1" className="day__time--hour">
              <RSQFlatInput.HourPicker label={this.props.labelFirst} ref={node => {this.firstPicker = node;}} />
            </div>,
            <div key="2" className="day__time--hour">
              <RSQFlatInput.HourPicker label={this.props.labelSecond} ref={node => {this.secondPicker = node;}} />
            </div>,
          ] :
            <div className="day__time--hour">
              <RSQFlatInput.TimePicker label={this.props.labelFirst} ref={node => {this.timepicker = node;}} />
            </div>
        }
      </div>
    );
  }
}


TimeRowInputs.propTypes = {
  labelFirst: PropTypes.string,
  labelSecond: PropTypes.string,
};

export default Schedules;