import React from "react";
import Slider from "react-slick";
import numeral from "numeral";

function NextArrow(props) 
{
	const { className, style, onClick } = props;

	return (
		<button className={ className } style={{ ...style }} onClick={ onClick } >
			<svg width={ 8 } height={ 12 } fill="none" xmlns="http://www.w3.org/2000/svg">
				<path d="m1 1 6 5-5.25 5" stroke="#fff" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
			</svg>
		</button>
	)
}

function PrevArrow(props) 
{
	const { className, style, onClick } = props;

	return (
		<button className={ className } style={{ ...style }} onClick={ onClick } >
			<svg width={ 8 } height={ 12 } fill="none" xmlns="http://www.w3.org/2000/svg">
				<path d="M7 11 1 6l5.25-5" stroke="#fff" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
			</svg>
		</button>
	)
}

export default class CalculationsList extends React.Component 
{
	constructor(props) 
	{
		super(props);
		this.state = {
			company: {},
		};
	}

	_handle_onCalculation = (calculation_id) => 
	{
		//href={ `/contract/${ number }/change/#${ calculation.addcontract_number }` } 
		this.props.onCalculation(calculation_id);
	}

	render() 
	{
		const settings = {
			dots: false,
			infinite: false,
			speed: 500,
			slidesToShow: 2.3,
			slidesToScroll: 1,
			centerMode: false,
			variableWidth: false,
			nextArrow: <NextArrow />,
			prevArrow: <PrevArrow />,
		};

		const { number, calculations } = this.props;

		console.log("\x1B[31m calculations \x1B[34m", calculations);

		return (
			<div className="feed">
				<div className="feed_list">
					<Slider { ...settings }>
						{ calculations !== undefined && calculations !== null && calculations.map((calculation, index) => 
						(
							<div className="feed_item" key={ index }>
								<p className="item_title">Расчет № { calculation.label }</p>
								<p className="item_desc">
									{ calculation.date_offset_type_comment !== null && (<>{ `${ calculation.date_offset_type_comment.label }: ${ calculation.date_offset_type_comment.value }` }<br/></>) }
									{ calculation.number_paydate_comment !== null && (<>{ `${ calculation.number_paydate_comment.label }: ${ calculation.number_paydate_comment.value }` }<br/></>) }
									{ calculation.insurance_price_result_comment !== null && (<>{ calculation.insurance_price_result_comment.label }: <span>{ calculation.insurance_price_result_comment.value }</span><br/></>) }
									{ calculation.fix_last_payment_available_comment !== null && (<>{ `${ calculation.fix_last_payment_available_comment.label }: ${ calculation.fix_last_payment_available_comment.value ? "да" : "нет" }` }<br/></>) }
									{ calculation.period_new_comment !== null && (<>{ `${ calculation.period_new_comment.label }: ${ calculation.period_new_comment.value }` }<br/></>) }
									{ calculation.sum_comment !== null && (<>{ calculation.sum_comment.label }: <span>{ calculation.sum_comment.value }</span><br/></>) }
								</p>
								<a className="item_link interactive" onClick={ () => this._handle_onCalculation(calculation.addcontract_number) }>Подробнее</a>
							</div>
						)) }
					</Slider>
				</div>
			</div>
		);
	}
}