import React Component from react import moment from moment import Wee

import React, {Component} from 'react';
import moment from 'moment';
import WeekCalendar from './weekCalendar';
import './App.css';
import Modal from "./modal";
import Acordion from './Acordion';
import Header from './Header';
import Week from './Week';
class App extends Component {

    constructor(props) {
        super(props)
        this.state = {
            data: moment(),
            weekViewMode: false,
            isModalOpen: false,
            notes: []
        }
    }

    nextMonth = () => {
        this.setState({
            date: this.state.data.add(1, 'months')
        })
    }
    prevMonth = () => {
        this.setState({
            date: this.state.data.subtract(1, 'months')
        })
    }

    weekMode = () => {
        this.setState({
            weekViewMode: true
        })

    }
    monthMode = () => {
        this.setState({
            weekViewMode: false
        })

    }
    openModal = () => {
        this.setState({
            isModalOpen: true
        })
    }


    closeModal = () => {
        this.setState({
            isModalOpen: false
        })
    }
    res = ''
    data = {}
    nameHandleChange = (e) => {


        this.data.name = e.target.value

    }
    bodyHandleChange = (e) => {


        this.data.body = e.target.value

    }
    timeHandleChange = (e) => {


        this.data.time = e.target.value

    }
    getDate = (date) => {
        this.openModal()
        this.res = moment(date)


    }

    makeNote = () => {
        const notes = [...this.state.notes];;
        const sameEventDate = notes.find(n =>  n.date.isSame(this.res, 'data'));
        if (sameEventDate){
            sameEventDate.events.push(this.data);
        } else{
            const newEventDate={
                date:this.res,
                events:[this.data]
            };
            notes.push(newEventDate);
        }

        this.setState({ notes: notes });
        console.log(this.state)
        this.closeModal()
    }


    isToday = (day)=>{
        return moment().isSame(day,'day');
    }
    isWeekend =(day) => {

        return [6,0].includes(moment(day).day())
    }

    renderCalendarItem = (day, dayIndex) => {
        const eventsForDay = this.state.notes.find(note =>
            moment(note.date).isSame((day), 'day'));

        const haveEventForDay = eventsForDay ? !!eventsForDay.events.length : false;

        return (
            <td
                className={`${haveEventForDay ? 'events' : ''} ${this.isWeekend(day) ? 'weekend' : 'workday'}
                ${this.isToday(day) ? 'today': ''}`}
                onClick={() => this.getDate(day)}
                key={dayIndex}>{day.date()}
            </td>
        );
    }






    render() {
        const startWeek = this.state.data.startOf('month').week();
        const endWeek = this.state.data.endOf('month').week();


        let calendar = []
        for (let week = startWeek; week < endWeek; week++) {
            calendar.push({
                week: week,
                days: Array(7).fill(0).map((n, i) => moment().week(week).startOf('week').clone().add(n + i, 'day'))
            })
        }

        return (
            <div className="container">
                {this.state.isModalOpen ?
                  <Modal
                      handleName={this.nameHandleChange}
                      handleBody={this.bodyHandleChange}
                      handleTime={this.timeHandleChange}
                      makeNote={this.makeNote}
                      res={this.res}
                      data={this.data}
                  /> : null}
                  <Header
                      isWeekViewMode={this.state.weekViewMode}
                  data={ this.state.data}
                  nextMonth={this.nextMonth}
                  prevMonth={this.prevMonth}

                  />
                      <Acordion

                      weekMode={this.weekMode}
                      monthMode={this.monthMode}

                      />

<Week/>
                 <div className="table">
                <table >

                    {this.state.weekViewMode ? <WeekCalendar/> :
                        calendar.map((week, weekIndex) => (
                            <tr key={weekIndex}>

                                {week.days.map((day, dayIndex) =>
                              this.renderCalendarItem(day, dayIndex))}
                            </tr>))}
                </table>
                </div>
                <div >
                    {this.state.notes.map((note,noteIndex)=>(<div  className="notesHead" key={noteIndex}>{moment(note.date).format('ddd DD MMM')}
                    <div className="notes">
                        {note.events.map((event,noteIndex)=>(<label className="row" key={noteIndex}>{event.name}</label>))}
                        {note.events.map((event,noteIndex)=>(<label className="row" key={noteIndex}>{event.time}</label>))}
                        {note.events.map((event,noteIndex)=>(<label key={noteIndex}>{event.body}</label>))}
                    </div>
                    </div>))}

                </div>
            </div>
        );
    }
}

export default App;