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

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 SignatoriesList extends React.Component 
{
	constructor(props) 
	{
		super(props);
		this.state = {
			company: {},
			width: 1920
		};
	}

	componentDidMount()
	{
		this.setState({
			width: window.innerWidth
		})
	}

	render() 
	{
		const settings = {
			dots: false,
			infinite: false,
			speed: 500,
			slidesToShow: this.state.width < 1279 ? 1 : 2.5,
			centerMode: false,
			variableWidth: this.state.width < 1279 ? true : false,
			dragFree: this.state.width < 1279 ? true : false,
			centerMode: false,
			nextArrow: <NextArrow />,
			prevArrow: <PrevArrow />,
		};

		const { signatories } = this.props;

		return (
			<div className="feed">
				<div className="feed_list">
					<Slider { ...settings }>
						{ signatories !== undefined && signatories !== null && signatories.map((signer, index) => 
						(
							<div className="feed_item user" key={ index }>
								<img src="/assets/images/icons/avatar.svg" alt="" />
								<div>
									<p className="item_title">{`${ signer.lastname } ${ signer.firstname } ${ signer.middlename }`}</p>
									<p className="item_desc">{ signer.jobtitle }</p>
								</div>
							</div>
						)) }
					</Slider>
				</div>
			</div>
		);
	}
}