import React from "react";
import pluralize from 'pluralize-ru';

const statuses = {
	"100": {
		index: undefined, 
		title: "Выбор КП", 
		icon: "/assets/images/status/icon_deal_status_100.svg", 
	}, 
	"101": {
		index: 1, 
		title: "Выбор программы финансирования", 
		icon: "/assets/images/status/icon_deal_status_101.svg", 
	}, 
	"102": {
		index: 2, 
		title: "Сбор пакета документов", 
		icon: "/assets/images/status/icon_deal_status_102.svg", 
	}, 
	"103": {
		index: 3, 
		title: "Проверка документов", 
		icon: "/assets/images/status/icon_deal_status_103.svg", 
	}, 
	"104": {
		index: 4, 
		title: "Принятие решения по сделке", 
		icon: "/assets/images/status/icon_deal_status_104.svg", 
	}, 
	"105": {
		index: 5, 
		title: "Требуется изменение параметров", 
		icon: "/assets/images/status/icon_deal_status_105.svg", 
	}, 
	"106": {
		index: 5, 
		title: "Принято положительное решение", 
		icon: "/assets/images/status/icon_deal_status_106.svg", 
	}, 
	"107": {
		index: 6, 
		title: "Оформление лизинга", 
		icon: "/assets/images/status/icon_deal_status_107.svg", 
	}, 
};

export default class DealsListDeal extends React.Component
{
	constructor(props)
	{
		super(props)
	}

	//getDealOffers

	render()
	{
		const { onSelectDeal, index, comment, opp_number, statuscode_id, statuscode_name } = this.props;
		const step = statuscode_id - 100;

		return (
			<div className="list_item deal_list_item" onClick={() => { onSelectDeal(opp_number, index) }}>
				<div>
					<p>№ { opp_number }</p>
				</div>
				<div>
					<p>
						{ statuses[ statuscode_id ].index === undefined ? "Новая сделка" : `${ statuses[ statuscode_id ].index } ${ pluralize(step, 'этапа', 'этап', 'этапа', 'этапов') } ${ pluralize(statuses[ statuscode_id ].index, 'пройдено', 'пройден', 'пройдено', 'пройдено') }` } 
						{/*}
						<svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} fill="none">
							<path stroke="#8E94A7" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.625 6.75 9 12.375 3.375 6.75" />
						</svg>
						{*/}
					</p>
				</div>
				<div>
					<img src={ statuses[ statuscode_id ].icon } width="50" height="50" />
					{/*}<p>{ statuscode_name }</p>{*/}
					<p>{ statuses[ statuscode_id ].title }</p>
				</div>
				<div>
					<button className="button">
						{ statuscode_id === 105 || statuscode_id === 107 ? (
							"Подробнее"
						) : (
							<>Еще { statuses[ statuscode_id ].index !== undefined ? (6 - statuses[ statuscode_id ].index) : 6 } { pluralize(statuses[ statuscode_id ].index !== undefined ? (6 - statuses[ statuscode_id ].index) : 6, 'этапа', 'этап', 'этапа', 'этапов') }</>
						) }
						<svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} fill="none">
							<path stroke="#1C01A9" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.625 6.75 9 12.375 3.375 6.75" />
						</svg>
					</button>
				</div>
			</div>
		)
	}
}