import React from 'react';
import { WordpressTaxonomy } from '../models/wp';
import TabsMenu, { TabItem } from '../layout/TabsMenu';
import PlacementSelectTaxonomy from './PlacementSelectTaxonomy';
import logo from '../assets/logo';
import { useStoreActions, useStoreState } from '../store/store.hooks';
import { prop } from 'ramda';

interface Props {
	data: {
		categories: WordpressTaxonomy[];
		tags: WordpressTaxonomy[];
	};
}

function PlacementSelectTaxonomyContainer({ data }: Props) {
	const selectedTaxonomies = useStoreState((state) => state.placements.selectedTaxonomies);
	const selectedTaxonomyType = useStoreState((state) => state.placements.selectedTaxonomyType);
	const selectedIds = selectedTaxonomies.map(prop('term_id'));
	const toggleTaxonomy = useStoreActions((actions) => actions.placements.toggleTaxonomy);

	const tabs: TabItem[] = [
		{
			title: 'By Category',
			key: 'category',
			tab: () => (
				<PlacementSelectTaxonomy
					items={data.categories}
					selected={selectedIds}
					selectedTaxonomyType={selectedTaxonomyType}
					onSelect={toggleTaxonomy}
				/>
			),
		},
		{
			title: 'By Tag',
			key: 'tag',
			tab: () => (
				<PlacementSelectTaxonomy
					items={data.tags}
					selected={selectedIds}
					selectedTaxonomyType={selectedTaxonomyType}
					onSelect={toggleTaxonomy}
				/>
			),
		},
	];
	return <TabsMenu tabs={tabs} activeKey={'category'} variant={'mini'} />;
}

export default PlacementSelectTaxonomyContainer;