import React, { Component } from 'react';
import { connect } from 'react-redux';
import WeekList from '../components/calendar_show';

class CalendarList extends Component {
  renderCalendar(weeks) {
    console.log('weeksData', weeks)
    const days = weeks.data.weeks.map(day => day.days_in_week);
    console.log('days', days);
    if (days.length > 4) {
    var firstWeek = days[0].map(day=>day.day_number);
    var secondWeek = days[1].map(day=>day.day_number);
    var thirdWeek = days[2].map(day=>day.day_number);
    var forthWeek = days[3].map(day=>day.day_number);
    var fifthWeek = days[4].map(day=>day.day_number);
    var Month = firstWeek.concat(secondWeek, thirdWeek, forthWeek, fifthWeek);
  } else {
      var firstWeek = days[0].map(day=>day.day_number);
      var secondWeek = days[1].map(day=>day.day_number);
      var thirdWeek = days[2].map(day=>day.day_number);
      var forthWeek = days[3].map(day=>day.day_number);
      var Month = firstWeek.concat(secondWeek, thirdWeek, forthWeek);
    }

    if (weeks.data.month.key == true) {
      alert('Month is already displayed! Every month can be get only 1 by one user')
    }
    const finalMonth = Month.join(', ')
    return (
      // <tr key={weeks.data.month}>
      //     <td>{weeks.data.year}</td>
      //     <td>{weeks.data.month}</td>
      //     <td>{days.length}</td>
      //     <td>{weeks.data.owner_id}</td>
      //     <td>{finalMonth}</td>
      <tr key={weeks.data.month}>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>

//HERE WANT TO RETURN MORE ROWS TO LOOKS LIKE

1 2 3 4 5 6 7
8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27 28
29 30 31
    </tr>
    );
  }
  render() {
    if(this.props.week.length < 1) {
      return <div></div>;
    }
    return (
       <table className="table table-hover">
        <thead>
          <tr>
            <th>
              <span className="glyphicon glyphicon-search" aria-hidden="true"></span>
              <span>%month%</span>
              <span className="glyphicon glyphicon-search" aria-hidden="true"></span>
            </th>
          </tr>
          <tr>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
            <th>Saturday</th>
            <th>Sunday</th>
          </tr>
        </thead>
        <tbody>
          {this.props.week.map(this.renderCalendar)}
        </tbody>
      </table>
    );
  }
}

function mapStateToProps({ week }) {
  return {
    week: week
  }
}

export default connect(mapStateToProps)(CalendarList);