import React from 'react';
import { useStoreActions, useStoreState } from '../store/store.hooks';
import TabsMenu, { TabItem } from '../layout/TabsMenu';
import PlacementSelectInsertion from './PlacementSelectInsertion';
import PlacementSelectAlignment from './PlacementSelectAlignment';

interface Props {}

function PlacementSelectPositionContainer({}: Props) {
	const { selectedInsertionPoint, selectedInsertionNumber, selectedAlignment } = useStoreState(
		(state) => ({
			selectedInsertionPoint: state.placements.selectedInsertionPoint,
			selectedInsertionNumber: state.placements.selectedInsertionNumber,
			selectedAlignment: state.placements.selectedAlignment,
		})
	);
	const setInsertionPoint = useStoreActions((actions) => actions.placements.setInsertionPoint);
	const setInsertionNumber = useStoreActions((actions) => actions.placements.setInsertionNumber);
	const setAlignment = useStoreActions((actions) => actions.placements.setAlignment);

	const tabs: TabItem[] = [
		{
			title: 'Insertion',
			key: 'insertion',
			tab: () => (
				<PlacementSelectInsertion
					onInsertionPointChange={setInsertionPoint}
					onInsertionNumberChange={setInsertionNumber}
					insertionPoint={selectedInsertionPoint}
					insertionNumber={selectedInsertionNumber}
				/>
			),
		},
		{
			title: 'Alignment',
			key: 'alignment',
			tab: () => (
				<PlacementSelectAlignment
					alignment={selectedAlignment}
					onAlignmentChange={setAlignment}
				/>
			),
		},
	];
	return <TabsMenu tabs={tabs} activeKey={'insertion'} variant={'mini'} width={'100%'} />;
}

export default PlacementSelectPositionContainer;