import React, { FC } from 'react';
import classnames from 'classnames';
import css from './index.module.css';
import Checkbox from '../../blocks/Checkbox';

export interface TimetableProps {
  timeSlots?: unknown;
}

const days = [
  {
    title: 'TUE',
    label: '22.10',
    date: new Date(2019, 9, 22),
    slots: ['15:00', '15:30', '16:00', '16:30', '17:00', '17:30'],
  },
  {
    title: 'WED',
    label: '23.10',
    date: new Date(2019, 9, 23),
    slots: ['15:00', '15:30', '16:00', '16:30', '17:00', '17:30'],
  },
  {
    title: 'THU',
    label: '24.10',
    date: new Date(2019, 9, 24),
    slots: ['15:00', '15:30', '16:00', '16:30', '17:00', '17:30'],
  },
];

const Timetable: FC<TimetableProps> = () => {
  return (
    <div className={css.timetable}>
      <div className="option">
        <Checkbox label="I don't know / I am flexible" name="foo"></Checkbox>
      </div>
      {/* TODO:: set isSelected via prop in object, not via idx */}
      <div className={css.timetable__days}>
        {days &&
          days.map((day, idx0) => (
            <div key={day.title} className={css.timetable__item}>
              <div className={css.timetable__head}>
                {day.title} <br />
                <strong>{day.label}</strong> <br />
              </div>
              <div className="slots">
                {day.slots &&
                  day.slots.map((slot, idx) => {
                    return (
                      <div key={slot} className={css.timetable__slot}>
                        <button
                          className={classnames(css.timetable__slotButton, {
                            [`${css.timetable__slotButtonIsSelected}`]:
                              idx0 === 0 && idx === 0,
                          })}
                        >
                          {slot}
                        </button>
                      </div>
                    );
                  })}
              </div>
            </div>
          ))}
      </div>
    </div>
  );
};

export default Timetable;