import React, { Component } from "react";
import Link from "next/link";
import numeral from "numeral";
import moment from "moment";

class CalendarCellModal extends Component 
{
	constructor(props) 
	{
		super(props);
		this.state = {
			menuOpened: false,
			activeLink: ""
		};
	}

	toggleMenu = () => {
		this.setState({
			menuOpened: !this.state.menuOpened
		});
	};

	selected = (text) => {
		this.toggleMenu();
		this.setState({
			activeLink: text
		})
	}

	render() 
	{
		const {menuOpened, activeLink} = this.state;
		const { selected_payment } = this.props;

		return (
			<div className={this.props.open ? "fade opened" : "fade"}>
				<div className="modal">
					<div className="calendar_payment">
						<div className="day">
							{ selected_payment && (
								<>
									<span>{ moment(selected_payment.date, "YYYY-MM-DD").format("DD") }</span> { moment(selected_payment.date).format("MMM") }
								</>
							) }
						</div>
						<div className="payment_table">
							<div className="table_row table_header">
								<div className="table_cell">Договор</div>
								<div className="table_cell">Платеж</div>
							</div>
							{ selected_payment && selected_payment.payments.map((payment, index) => (
								<div className="table_row" key={ index }>
									<div className="table_cell">
										<Link href={`/contract/${ payment.contract.number }/payments`}>
											<a>№{ payment.contract.number } от { moment(payment.contract.date, "DD-MM-YYYY").format("DD.MM.YYYY") }</a>
										</Link>
									</div>
									<div className="table_cell">
										<b style={{ whiteSpace: "nowrap" }}>{ numeral(payment.total_amount).format(' ., ') } ₽</b>
									</div>
								</div>
							)) }
						</div>
					</div>
					<div className="modal_footer">
						<button className="button button-blue" onClick={() => this.props.close()}>Закрыть</button>
					</div>
				</div>
			</div>
		);
	}
}

export default CalendarCellModal;