import React, { Fragment } from 'react';
import { WordpressTaxonomy } from '../models/wp';
import { Grid, Wrapper, secondary, black, borderRadius, Flex } from 'dot-design-system';
import TaxonomyButton from '../elements/TaxonomyButton';
import { path } from 'ramda';

interface Props {
	selectedTaxonomyType: string;
	items: WordpressTaxonomy[];
	selected: (number | string)[];
	onSelect: (item: WordpressTaxonomy) => void;
}

function PlacementSelectTaxonomy({ items, selected, selectedTaxonomyType, onSelect }: Props) {
	const taxonomy = path([0, 'taxonomy'], items);
	const allTaxonomy = {
		name: 'All',
		term_id: 'all',
		taxonomy: taxonomy,
	};
	return (
		<Fragment>
			<Wrapper
				css={`
					&& {
						padding-bottom: 5px;
					}
				`}
			>
				<TaxonomyButton
					active={
						selected.includes(allTaxonomy.term_id) && taxonomy === selectedTaxonomyType
					}
					item={allTaxonomy as WordpressTaxonomy}
					onClick={() => onSelect(allTaxonomy as WordpressTaxonomy)}
				/>
			</Wrapper>
			<Grid columnLayout={'1fr 1fr 1fr'} gridGap={5}>
				{items.map((item) => (
					<TaxonomyButton
						active={selected.includes(item.term_id)}
						item={item}
						key={item.term_id}
						onClick={() => onSelect(item)}
					>
						{item.name}
					</TaxonomyButton>
				))}
			</Grid>
		</Fragment>
	);
}

export default PlacementSelectTaxonomy;