import React Component from react import moment from moment import Wee

import React, {Component} from 'react';
import moment from 'moment';
import WeekCalendar from './weekCalendar';

class App extends Component {

    constructor(props) {
        super(props)
        this.state = {
            data: moment(),
            weekViewMode: false,
            isModalOpen: false,
            notes: [{
                date: '',
                events: [{
                    name: '',
                    body: '',
                    time: ''
                }]
            }]
        }
    }

    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).format('DD MM YYYY')


        console.log(this.state)
    }

    makeNote = (date, data) => {
        this.setState({
            date: date,
            notes: {...data}

        })
        console.log(this.state)
        // this.closeModal()
    }

    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>
                {this.state.isModalOpen ?
                    <div>
                        <label>name</label>
                        <input onChange={this.nameHandleChange}/>
                        <label>body</label>
                        <input onChange={this.bodyHandleChange}/>
                        <label>time</label>
                        <input type="time" onChange={this.timeHandleChange}/>
                        <button onClick={() => this.makeNote(this.res, this.data)}>Create</button>
                    </div> : null}
                <button onClick={this.prevMonth}>prev</button>
                <button onClick={this.nextMonth}>next</button>
                <button onClick={this.weekMode}>week mode</button>
                <button onClick={this.monthMode}>month mode</button>
                <table style={{Border: "1px solid red "}}>

                    <td>S</td>
                    <td>M</td>
                    <td>T</td>
                    <td>W</td>
                    <td>T</td>
                    <td>F</td>
                    <td>S</td>
                    {this.state.weekViewMode ? <WeekCalendar/> :
                        calendar.map((week, weekIndex) => (
                            <tr key={weekIndex}>
                                {/*{week.week}*/}
                                {week.days.map((day, dayIndex) =>
                                    <td onClick={() => this.getDate(day)} key={dayIndex}>{day.date()}</td>)}
                            </tr>))}
                </table>
            </div>
        );
    }
}

export default App;