import React from "react";
import Link from "next/link";

import moment from 'moment';
import pluralize from 'pluralize-ru';

export default class NotificationMessage extends React.Component 
{
	constructor(props) 
	{
		super(props);
		this.state = {
		};
	}

	_handle_onLink = (url) => 
	{
		window.location = url;
	}

	render() 
	{
		const { event } = this.props;

		if(event !== undefined && event !== null)
		{
			switch(event.event_type)
			{
				case "kasko_prolong":
				{
					const days_left = moment(event.event_date).diff(moment().startOf("day"), 'days');

					return (
						<li className="new">
							<p className="name"><b>Внимание! { days_left === 0 ? "Сегодня последний день" : `${ pluralize(days_left, "Осталось", "Остался", "Осталось", "Осталось") } ${ days_left } ${ pluralize(days_left, "дней", "день", "дня", "дней") } до` } пролонгации КАСКО по договору №{ event.contract_number } (полис { event.add_info }).</b></p>
							{ event.important && (<p className="type">Важное</p>) }
							<p className="date">{ moment(event.event_date).format("DD.MM.YYYY") }</p>
							<p className="action">
								<a className="interactive" onClick={ () => this._handle_onLink(`/contract/${ event.contract_number }/services#insurance`) }>Подробнее</a>
							</p>
						</li>
					)
				}

				case "osago_prolong":
				{
					const days_left = moment(event.event_date).diff(moment().startOf("day"), 'days');

					return (
						<li className="new">
							<p className="name"><b>Внимание! { days_left === 0 ? "Сегодня последний день" : `${ pluralize(days_left, "Осталось", "Остался", "Осталось", "Осталось") } ${ days_left } ${ pluralize(days_left, "дней", "день", "дня", "дней") } до` } пролонгации ОСАГО по договору №{ event.contract_number } (полис { event.add_info }). Не забудьте самостоятельно продлить полис ОСАГО!</b></p>
							{ event.important && (<p className="type">Важное</p>) }
							<p className="date">{ moment(event.event_date).format("DD.MM.YYYY") }</p>
							<p className="action">
								<a className="interactive" onClick={ () => this._handle_onLink(`/contract/${ event.contract_number }/services#insurance`) }>Подробнее</a>
							</p>
						</li>
					)
				}

				case "fingap_prolong":
				{
					const days_left = moment(event.event_date).diff(moment().startOf("day"), 'days');

					return (
						<li className="new">
							<p className="name"><b>Внимание! { days_left === 0 ? "Сегодня последний день" : `${ pluralize(days_left, "Осталось", "Остался", "Осталось", "Осталось") } ${ days_left } ${ pluralize(days_left, "дней", "день", "дня", "дней") } до` } пролонгации Safe Finance по договору №{ event.contract_number }.</b></p>
							{ event.important && (<p className="type">Важное</p>) }
							<p className="date">{ moment(event.event_date).format("DD.MM.YYYY") }</p>
							<p className="action">
								<a className="interactive" onClick={ () => this._handle_onLink(`/contract/${ event.contract_number }/services#insurance`) }>Подробнее</a>
							</p>
						</li>
					)
				}

				case "fine_gibdd":
				{
					return (
						<li className="new">
							<p className="name"><b>Внимание! Получен штраф ГИБДД по договору №{ event.contract_number } на сумму { event.add_info }.</b></p>
							{ event.important && (<p className="type">Важное</p>) }
							<p className="date">{ moment(event.event_date).format("DD.MM.YYYY") }</p>
							<p className="action">
								<Link href={`/contract/${ event.contract_number }/fines`}>
									<a>Подробнее</a>
								</Link>
							</p>
						</li>
					)
				}

				case "end_contract":
				{
					const days_left = moment(event.event_date).diff(moment().startOf("day"), 'days');

					return (
						<li className="new">
							<p className="name"><b>Внимание! { days_left === 0 ? "Сегодня дата" : `${ pluralize(days_left, "Осталось", "Остался", "Осталось", "Осталось") } ${ days_left } ${ pluralize(days_left, "дней", "день", "дня", "дней") } до даты` } окончания договора №{ event.contract_number }.</b></p>
							{ event.important && (<p className="type">Важное</p>) }
							<p className="date">{ moment(event.event_date).format("DD.MM.YYYY") }</p>
							<p className="action">
								<Link href={`/support/faq#68b86ac533992ce7db73d9b6f4e1bfc0`}>
									<a>Посмотрите порядок оформления выкупа</a>
								</Link>
							</p>
						</li>
					)
				}

				case "graph_change":
				{
					return (
						<li className="new">
							<p className="name"><b>Сформировано новое ДС №{ event.add_info} от { moment(event.event_date).format("DD.MM.YYYY") } по договору №{ event.contract_number }.</b></p>
							{ event.important && (<p className="type">Важное</p>) }
							<p className="date">{ moment(event.event_date).format("DD.MM.YYYY") }</p>
							<p className="action">
								<Link href={`/contract/${ event.contract_number }/agreement`}>
									<a>Посмотреть дополнительное соглашение</a>
								</Link>
							</p>
						</li>
					)
				}

				case "return_pts":
				{
					return (
						<li className="new">
							{ event.important ? (
								<p className="name"><b>Внимание! Просрочена дата возврата СТС по договору №{ event.contract_number }. Посмотрите порядок возврата СТС или загрузите скан СТС по ссылке.</b></p>
							) : (
								<p className="name"><b>Приближается дата возврата СТС по договору №{ event.contract_number }. Посмотрите порядок возврата СТС или загрузите скан СТС по ссылке.</b></p>
							) }
							{ event.important && (<p className="type">Важное</p>) }
							<p className="date">{ moment(event.event_date).format("DD.MM.YYYY") }</p>
							<p className="action">
								<Link href="/support/faq#68249d3b3ef51d25ff5f9433e8a7d60a">
									<a>Посмотрите порядок возврата СТС</a>
								</Link>
								&nbsp; или &nbsp;
								<Link href="/support/request#68249d3b3ef51d25ff5f9433e8a7d60a">
									<a>Загрузите скан СТС</a>
								</Link>
							</p>
						</li>
					)
				}
			}
		}

		return null;
		{/*}
			<li className="new">
				<p className="name"><b>Внимание! Просрочена дата возврата СТС по договору: ХХ.ХХ.ХХХХ</b></p>
				<p className="date">10.01.2022</p>
				<p className="action">
					<Link href="/">
						<a>Посмотрите порядок возврата СТС</a>
					</Link>
					&nbsp; или &nbsp;
					<Link href="/">
						<a>Загрузите скан СТС</a>
					</Link>
				</p>
			</li>
		{*/}
		{/*}
			<li className="new">
				<p className="name"><b>Внимание! Просрочена дата возврата СТС по договору: ХХ.ХХ.ХХХХ</b></p>
				<p className="date">10.01.2022</p>
				<p className="action">
					<Link href="/">
						<a>Посмотрите порядок возврата СТС</a>
					</Link>
					&nbsp; или &nbsp;
					<Link href="/">
						<a>Загрузите скан СТС</a>
					</Link>
				</p>
			</li>
		{*/}
		{/*}
			<li className="new">
				<p className="name">Внимание! Осталось ХХ дней до пролонгации КАСКО по договору №ХХХХ: ХХ.ХХ.ХХХХ. Не забудьте самостоятельно продлить полис ОСАГО</p>
				<p className="date">10.01.2022</p>
				<p className="action">
					<Link href="/">
						<a>Подробнее</a>
					</Link>
				</p>
			</li>
		{*/}
	}
}