/* @flow */

import React from 'react';
import moment from 'moment';
import PropTypes from 'prop-types';
import classNames from 'classnames';

const DayCell: DayCell = ({startHour, endHour, intervals}) => {
  const getHoursPeriod: Function = () => {
    const HOURS: Object[] = [];
    for (let i: moment = moment(startHour, 'HH:mm'); i.isBefore(moment(endHour, 'HH:mm')); i.add(1, 'h')) {
      HOURS.push(moment(i));
    }
    return HOURS;
  };

  const getInterval: Function = (hour) => {
    return intervals.find(interval => hour.isSame(moment(interval.from, 'HH:mm')));
  };

  return (
    <div className="schedules-table-day">
      { getHoursPeriod().map((hour, index) => {
        const interval: Object = getInterval(hour);
        return interval ?
          <Cell
            key={index}
            reserved={hour.isSameOrBefore(moment(interval.to, 'HH:mm')) && hour.isSameOrAfter(moment(interval.from, 'HH:mm'))}
            firstHour={hour.isSame(moment(interval.from, 'HH:mm'))}
            interval={interval}
          /> : <Cell key={index} />;
      })
      }
    </div>
  );
};

const Cell: Cell = ({reserved, firstHour, interval = {}}) => {
  const getFirstLetter: Function = ([letter]) => {
    return letter;
  };
  const initials: string = interval.employee ? `${getFirstLetter(interval.employee.firstName)}${getFirstLetter(interval.employee.lastName)}` : '';

  return (
    <div
      className={classNames('schedules-table-cell', {
        'reserved': reserved,
      })}>
      {firstHour && initials}
    </div>
  );
};

Cell.propTypes = {
  reserved: PropTypes.bool,
  firstHour: PropTypes.bool,
  interval: PropTypes.object,
};

DayCell.propTypes = {
  startHour: PropTypes.string.isRequired,
  endHour: PropTypes.string.isRequired,
  intervals: PropTypes.array,
};


export default DayCell;