import React from "react";
import Head from 'next/head';
import Image from 'next/image';
import moment from 'moment';
import 'moment/locale/ru';
import numeral from "numeral";
import cookie from 'cookie';

import { connect } from "react-redux";
import { withRouter } from 'next/router';
import { reduxWrapper } from '../../store';

import Header from '../components/Header';
import Footer from '../components/Footer';
import InnerMenu from "./components/InnerMenu";
import Company from "../components/Company";
import CalendarCellModal from "../components/Modal/calendar";

import { getCalendar } from '../../actions';
import { MatchMedia } from '../../utils/mediaqueries';

class CalendarPage extends React.Component 
{
	constructor(props)
	{
		super(props);
		this.state = {
			modalOpened: false,
			payments: null,
			periods: null, 
			selected_period: moment().format("YYYYMM"), 
			selected_payment: undefined, 
			current_week: parseInt(moment().format('ww'), 10), 
			selected_week: 0, 
			weeks_in_month: 1, 
			perweek: MatchMedia() === "mobile" ? true : false, 
		};
	}

	static getDerivedStateFromProps(nextProps, prevState)
	{
		return {
			company: nextProps.company, 
			payments: nextProps.payments, 
			periods: nextProps.periods, 
		};
	}

	componentDidMount()
	{
		const date_from = moment().startOf("month").subtract(7, 'day').toDate();
		const date_to = moment().endOf("month").add(7, 'day').toDate();

		var clonedMoment = moment();
		var first = clonedMoment.startOf('month').week();
		var last = clonedMoment.endOf('month').week();
		if( first > last) { last = first + last; }
		let mw = last - first + 1;
		const nwsd = moment().endOf("month").add(1, "day").format("e");

		if(nwsd !== 0) { mw = mw - 1; }
		this.setState({ weeks_in_month: mw });

		getCalendar({ dispatch: this.props.dispatch, date_from, date_to }).then().catch();
	}

	toggleModal = () => 
	{
		this.setState({
			modalOpened: !this.state.modalOpened
		})
	}

	getPayments = (date) => 
	{
		const { payments } = this.state;

		for(let i in payments)
		{
			if(payments[i].date === date)
			{
				return payments[i];
			}
		}
		return undefined;
	}

	_handle_onDayClick = (day) => 
	{
		this.setState({ selected_payment: day.payment });
		this.toggleModal();
	}
	
	_handle_onChangePeriod = (period, new_selected_week) => 
	{
		var clonedMoment = moment(period, "YYYYMM");
		var first = clonedMoment.startOf('month').week();
		var last = clonedMoment.endOf('month').week();
		if( first > last) { last = first + last; }
		let mw = last - first + 1;

		const ld = parseInt(moment(period, "YYYYMM").endOf("month").format("e"), 10);
		if(ld !== 6) { mw = mw - 1; }

		this.setState({ selected_period: period, weeks_in_month: mw, selected_week: new_selected_week}, () => 
		{
			const date_from = moment(period, "YYYYMM").startOf("month").subtract(7, 'day').toDate();
			const date_to = moment(period, "YYYYMM").endOf("month").add(7, 'day').toDate();

			getCalendar({ dispatch: this.props.dispatch, date_from, date_to }).then().catch();	
		});
	}

	_handle_onWeek_prev = () => 
	{
		const { selected_period, selected_week, } = this.state;

		if(selected_week === 0)
		{
			var clonedMoment = moment(selected_period, "YYYYMM").subtract(1, "month");
			var first = clonedMoment.startOf('month').week();
			var last = clonedMoment.endOf('month').week();
			if( first > last) { last = first + last; }
			let mw = last - first + 1;

			const ld = parseInt(clonedMoment.endOf("month").format("e"), 10);
			if(ld !== 6) { mw = mw - 1; }

			const new_selected_week = mw - 1;
			const prev_period = clonedMoment.format("YYYYMM");

			this._handle_onChangePeriod(prev_period, new_selected_week);
		}
		else
		{
			this.setState({ selected_week: parseInt(selected_week, 10) - 1 }, () => 
			{
			});
		}
	}

	_getWeekToSwitch = () => 
	{
		const { selected_period, selected_week, weeks_in_month } = this.state;
	} 

	_handle_onWeek_next = () => 
	{
		const { selected_period, selected_week, weeks_in_month } = this.state;
		const next_week = selected_week + 1;

		if(next_week === weeks_in_month)
		{
			const next_period = moment(selected_period, "YYYYMM").add(1, "month").format("YYYYMM");
			this._handle_onChangePeriod(next_period, 0);
		}
		else
		{
			this.setState({ selected_week: next_week }, () => 
			{
			});
		}
	}

	render()
	{
		const { selected_period, selected_payment, periods, payments, current_week, selected_week, perweek, weeks_in_month } = this.state;
		if(payments === null) { return null; }

		let month = moment(selected_period, "YYYYMM").format("M") - 1;

		const dates = [];
		const date_sm = moment(selected_period, 'YYYYMM').startOf("month");
		const date_em = moment(selected_period, 'YYYYMM').endOf("month");

		let date_s = null;
		if(date_sm.clone().isoWeekday() !== 1)
		{ date_s = date_sm.clone().subtract(date_sm.clone().isoWeekday() - 1, "days"); }
		else
		{ date_s = date_sm; }

		let date_e = null;
		if(date_em.day() !== 0)
		{ date_e = date_em.add(7 - date_em.day(), "days"); }
		else
		{ date_e = date_em; }

		const date = moment();

		let d = date_s;
		let payment = this.getPayments(date_s.format("YYYY-MM-DD"));
		dates.push({
			date: date_s.clone(), 
			payment: payment, 
		});

		while(d.add(1, 'days').diff(date_e) < 0) 
		{
			dates.push({
				date: d.clone(), 
			});
		}

		for(let i in dates)
		{
			dates[i].payment = this.getPayments(dates[i].date.format("YYYY-MM-DD"));
		}

		const dow = date.day();
		const weeks = dates.reduce(function(result, value, index, array) {
			if (index % 7 === 0)
			  result.push(array.slice(index, index +7));
			return result;
		}, []);

		let render_weeks = [];
		if(perweek)
		{
			render_weeks = weeks.slice(selected_week, weeks_in_month);
		}
		else
		{
			render_weeks = weeks;
		}

		const periods_list = Object.values(periods);

		return (
			<React.Fragment>
				<Head>
					<title>ЛК Эволюция автолизинга</title>
					<meta
						name="description"
						content="ЛК Эволюция автолизинга"
					/>
				</Head>
				<Header { ...this.props }/>
				<main>
					<section>
						<div className="clear"></div>
						<div className="container">
							<div className="title_wrapper">
								<div className="left">
									{/*[{ perweek ? 1 : 0 }, { current_week }, { selected_week }, { weeks_in_month }]*/}
									<h1 className="section_title">Календарь оплат</h1>
								</div>
								<Company/>
							</div>
							<div className="aside_container about">
								<InnerMenu { ...this.props }/>
								<article>
									<div className="calendar_wrapper">
										<div className="form_field">
											{ periods_list.length > 0 && (
												<select id="calendar_month" value={ periods_list.indexOf(selected_period) < 0 ? periods_list[periods_list.length - 1] : selected_period } onChange={ (event) => this._handle_onChangePeriod(event.target.value, 0) }>
													{ periods !== null && periods_list.map((period, index) => (
															<option key={ index } value={ period }>{ moment(period, "YYYYMM").format('MMMM YYYY') }</option>
														)) }
												</select>
											) }
										</div>
										<div className="calendar_nav">
											<button onClick={ () => this._handle_onWeek_prev() } disabled={ moment(selected_period, "YYYYMM").add(selected_week * 7, "day") <= moment(periods_list[0], "YYYYMM") ? true : false }>Предыдущая неделя</button>
											<button onClick={ () => this._handle_onWeek_next() } disabled={ moment(selected_period, "YYYYMM").add(selected_week * 7, "day") >= moment(periods_list[periods_list.length - 1], "YYYYMM").add(1, "month") ? true : false }>Следующая неделя</button>
										</div>
										<div className="calendar_grid">
											<div className="grid_header">
												<div className="grid_cell">Пн</div>
												<div className="grid_cell">Вт</div>
												<div className="grid_cell">Ср</div>
												<div className="grid_cell">Чт</div>
												<div className="grid_cell">Пт</div>
												<div className="grid_cell">Сб</div>
												<div className="grid_cell">Вс</div>
											</div>
											<div className="grid_body">
												{ render_weeks.map((week, week_index) => 
												{
													return (
														<div className={week_index == 0 ? "grid_week active" : "grid_week"} key={"week_" + week_index}>
															{ week.map((day, index) => {
																if(day.payment)
																{
																	return (
																		<div key={ index } style={{ cursor: "pointer" }} className={`grid_cell payment ${ !perweek && day.date.month() !== month ? 'disabled' : '' } ${ day.date.format("YYYYMMDD") === moment().format("YYYYMMDD") ? 'current' : '' } `} onClick={ () => this._handle_onDayClick(day) }>
																			<div className="cell_header">
																				<p><span>{ day.date.format("DD") }</span> { day.date.format("MMM").toLocaleLowerCase() } { day.date.format("Y").toLocaleLowerCase() }</p>
																			</div>
																			<div className="cell_body">{ day.payment && (
																				<p>
																					Общий платеж
																					<span style={ day.payment.total > 1000000 ? { fontSize: '14px', whiteSpace: "nowrap" } : {}}>{ numeral(day.payment.total).format(' ., ') } ₽</span>
																				</p>
																			)}
																			</div>
																		</div>
																	)
																}
																return (
																	<div key={ index } className={`grid_cell ${ !perweek && day.date.month() !== month ? 'disabled' : '' } ${ day.date.format("YYYYMMDD") === moment().format("YYYYMMDD") ? 'current' : '' } `}>
																		<div className="cell_header">
																			<p><span>{ day.date.format("DD") }</span> { day.date.format("MMM").toLocaleLowerCase() } { day.date.format("Y").toLocaleLowerCase() }</p>
																		</div>
																	</div>
																)
															}) }
														</div>
													)
												}) }
											</div>
										</div>
									</div>
								</article>
							</div>
						</div>
					</section>
					<CalendarCellModal open={ this.state.modalOpened } selected_payment={ selected_payment } close={ () => this.toggleModal() }/>
				</main>
				<Footer/>
			</React.Fragment>
		)
	}
}

function mapStateToProps(state, ownProps)
{
	return {
		company: state.company, 
		payments: state.calendar.payments, 
		periods: state.calendar.periods, 
	}
}

export const getServerSideProps = reduxWrapper.getServerSideProps(store => 
	async ({ req, res, query }) => 
	{
		let props = {};

		if(req.headers.cookie !== undefined)
		{
			const cookies = cookie.parse(req.headers?.cookie ? req.headers?.cookie : "");

			if(cookies.jwt === undefined || cookies.jwt === null)
			{
				res.statusCode = 302;
				res.setHeader('Location', `/login`);
			}
			else
			{
				const tokenValid = true;
				if(!tokenValid)
				{
					res.statusCode = 302;
					res.setHeader('Location', `/login`);
				}
			}
		}
		else
		{
			res.statusCode = 302;
			res.setHeader('Location', `/login`);
		}
	
		return { props: props };
	}
);

export default withRouter(connect(mapStateToProps)(CalendarPage));