import 'react-dropdown/style.css';
import * as React from "react";
import Dropdown, { Option } from 'react-dropdown';
import ProductCategoryDropdown  from "./ProductCategoryDropdown";
import { IProductCategoryItem, IProductItem } from "../../../../apiModels/ViewModels";


type ProductListHeaderProps = {
	categories: IProductCategoryItem[],
	activeFilterExpression: string,
	activeSortExpression: string,
	activePageSizeExpression: string,
	onFilterExpressionChange(categoryId: number): void,
	onSortExpressionChange(arg: Option): void,
	onPageSizeExpressionChange(arg: Option): void,
	productItemsAmount: number,
	selectedCategories: IProductCategoryItem[]
}

const sortOptions = [
	{ value: '1', label: 'A-Z' },
	{ value: '2', label: 'Z-A' },
	{ value: '3', label: 'Nejdražší' },
	{ value: '4', label: 'Nejlevnější' }
];

const itemsOnPageOptions = [
	{ value: '4', label: '4' },
	{ value: '8', label: '8' },
	{ value: '12', label: '12' },
	{ value: '16', label: '16' }
];

class ProductListHeader extends React.Component<ProductListHeaderProps> {
	render() {
		const { activeFilterExpression,
			activePageSizeExpression,
			activeSortExpression,
			categories,
			onFilterExpressionChange,
			onPageSizeExpressionChange,
			onSortExpressionChange,
			productItemsAmount,
			selectedCategories } = this.props;

		return (
			<React.Fragment>
				{/* Product kategorie */}
				<div className="row">
					<div className="col-lg-12">
						<div className="section-title">
							<h2>Produkty</h2>
						</div>
						<div className="productCategory__menu">
							<ul>
								<li className={activeFilterExpression === '0' ? 'active' : ''} key='categoryListItem-0'
									onClick={() => onFilterExpressionChange(0)}>
									Všechny
								</li>
								<ProductCategoryDropdown
									activeFilterExpression={activeFilterExpression}
									categories={categories}
									level={0}
									onFilterExpressionChange={onFilterExpressionChange}
									parentId={-1} />
							</ul>
						</div>
						{selectedCategories.length > 0
							? <div>
								<span>Zvolená kategorie:</span>
								{selectedCategories !== undefined && selectedCategories.length > 0
									? selectedCategories.map((category, i) => {
										return (
											<span key={`selectedCategory-${category.id}`}>
												<button className="btn btn-link"
													onClick={() => onFilterExpressionChange(category.id)}
													disabled={category.id.toString() === activeFilterExpression}>{category.name}</button>
												{i + 1 !== selectedCategories.length
													? <i className="fas fa-chevron-right"></i>
													: null
												}
											</span>
										);
									})
									: null
								}
							</div>
							: null
						}
					</div>
				</div>

				{/* Razeni a list view nebo grid view*/}
				{/*<div className="filter__item">*/}
				{/*	<div className="row">*/}
				{/*		<div className="col-lg-4 col-md-4">*/}
				{/*			<div className="filter__sort">*/}
				{/*				<div className="row">*/}
				{/*					<div className='col-auto pr-0'>*/}
				{/*						<span>Řadit podle:</span>*/}
				{/*					</div>*/}
				{/*					<div className='col-auto pl-0'>*/}
				{/*						<Dropdown*/}
				{/*							className='my-dropdown-root' controlClassName='my-dropdown-control' placeholderClassName='my-dropdown-placeholder'*/}
				{/*							menuClassName='my-dropdown-menu'*/}
				{/*							options={sortOptions}*/}
				{/*							onChange={onSortExpressionChange} value={activeSortExpression}*/}
				{/*						/>*/}
				{/*					</div>*/}
				{/*				</div>*/}
				{/*			</div>*/}
				{/*		</div>*/}
				{/*		<div className="col-lg-4 col-md-4 col-sm-4">*/}
				{/*			<div className="filter__found">*/}
				{/*				{productItemsAmount !== undefined && productItemsAmount > 0*/}
				{/*					? <h6><span>{productItemsAmount}</span> Produktů nalezeno</h6>*/}
				{/*					: <h6><span>Žádné produkty nenalezeny</span></h6>*/}
				{/*				}*/}
				{/*			</div>*/}
				{/*		</div>*/}
				{/*		<div className="col-lg-4 col-md-4">*/}
				{/*			<div className='filter__count'>*/}
				{/*				<div className='row'>*/}
				{/*					<div className='col-auto pr-0'>*/}
				{/*						<span>Zobrazit kusů:</span>*/}
				{/*					</div>*/}
				{/*					<div className='col-auto pl-0' style={{ paddingRight: '0px' }}>*/}
				{/*						<Dropdown*/}
				{/*							className='my-dropdown-root' controlClassName='my-dropdown-control' placeholderClassName='my-dropdown-placeholder'*/}
				{/*							menuClassName='my-dropdown-menu'*/}
				{/*							options={itemsOnPageOptions}*/}
				{/*							onChange={onPageSizeExpressionChange} value={activePageSizeExpression}*/}
				{/*						/>*/}
				{/*					</div>*/}
				{/*				</div>*/}
				{/*			</div>*/}
				{/*		</div>*/}
				{/*	</div>*/}
				{/*</div>*/}
				<div className="filter__item">
					<div className="filter__sort">
						<div className="row">
							<div className='col-auto pr-0'>
								<span>Řadit podle:</span>
							</div>
							<div className='col-auto pl-0'>
								<Dropdown
									className='my-dropdown-root' controlClassName='my-dropdown-control' placeholderClassName='my-dropdown-placeholder'
									menuClassName='my-dropdown-menu'
									options={sortOptions}
									onChange={onSortExpressionChange} value={activeSortExpression}
								/>
							</div>
						</div>
					</div>
					<div className="filter__found">
						{productItemsAmount !== undefined && productItemsAmount > 0
							? <h6><span>{productItemsAmount}</span> Produktů nalezeno</h6>
							: <h6><span>Žádné produkty nenalezeny</span></h6>
						}
					</div>
					<div className='filter__count'>
						<div className='row'>
							<div className='col-auto pr-0'>
								<span>Zobrazit kusů:</span>
							</div>
							<div className='col-auto pl-0' style={{ paddingRight: '0px' }}>
								<Dropdown
									className='my-dropdown-root' controlClassName='my-dropdown-control' placeholderClassName='my-dropdown-placeholder'
									menuClassName='my-dropdown-menu'
									options={itemsOnPageOptions}
									onChange={onPageSizeExpressionChange} value={activePageSizeExpression}
								/>
							</div>
						</div>
					</div>
				</div>
			</React.Fragment>
		);
	}
}

export default ProductListHeader;