import React from "react";
import { connect } from "react-redux";
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>
	);
}

class FeedUsers extends React.Component 
{
	constructor(props) 
	{
		super(props);

		this.state = {
			company: {},
		};
	}

	static getDerivedStateFromProps(nextProps, prevState) 
	{
		return {};
	}

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

		return (
			<div className="feed">
				<div className="feed_list">
					<Slider { ...settings }>
						<div className="feed_item user">
							<img src="/assets/images/icons/avatar.svg" alt="" />
							<div>
								<p className="item_title">Иванов Иван</p>
								<p className="item_desc">
									Менеджер по продажам
								</p>
							</div>
						</div>
						<div className="feed_item user">
							<img src="/assets/images/icons/avatar.svg" alt="" />
							<div>
								<p className="item_title">Иванов Иван</p>
								<p className="item_desc">
									Менеджер по продажам
								</p>
							</div>
						</div>
						<div className="feed_item user">
							<img src="/assets/images/icons/avatar.svg" alt="" />
							<div>
								<p className="item_title">Иванов Иван</p>
								<p className="item_desc">
									Менеджер по продажам
								</p>
							</div>
						</div>
						<div className="feed_item user">
							<img src="/assets/images/icons/avatar.svg" alt="" />
							<div>
								<p className="item_title">Иванов Иван</p>
								<p className="item_desc">
									Менеджер по продажам
								</p>
							</div>
						</div>
						<div className="feed_item user">
							<img src="/assets/images/icons/avatar.svg" alt="" />
							<div>
								<p className="item_title">Иванов Иван</p>
								<p className="item_desc">
									Менеджер по продажам
								</p>
							</div>
						</div>
						<div className="feed_item user">
							<img src="/assets/images/icons/avatar.svg" alt="" />
							<div>
								<p className="item_title">Иванов Иван</p>
								<p className="item_desc">
									Менеджер по продажам
								</p>
							</div>
						</div>
					</Slider>
				</div>
			</div>
		);
	}
}

function mapStateToProps(state, ownProps) 
{
	return {};
}

export default connect(mapStateToProps)(FeedUsers);
