import React from 'react';
import TabsMenu, { TabItem } from '../layout/TabsMenu';
import CircleIcon from '../elements/CircleIcon';
import PlacementWidgetSelectContainer from './PlacementWidgetSelectContainer';
import { useStoreActions, useStoreState } from '../store/store.hooks';
import { PlacementTabKey } from './placements.models';
import PlacementConfigureContainer from './PlacementConfigureContainer';
import store from '../store/store';
import { subMenuMarginTop } from '../layout/layout.constants';
import { Wrapper } from 'dot-design-system';
import { wpBg } from '../styles/colors';
import TextIcon from '../elements/TextIcon';

interface Props {}

const placementTabs: TabItem[] = [
	{
		key: PlacementTabKey.SelectWidget,
		title: 'Select Widget',
		icon: <TextIcon>1.</TextIcon>,
		tab: () => <PlacementWidgetSelectContainer />,
	},
	{
		key: PlacementTabKey.SelectPlacement,
		title: 'Select Placement',
		icon: <TextIcon>2.</TextIcon>,
		tab: () => <PlacementConfigureContainer />,
	},
];

function PlacementTab({}: Props) {
	const currentStep = useStoreState((state) => state.placements.currentStep);
	const setStep = useStoreActions((actions) => actions.placements.setStep);
	const onTabSelect = (newTab: PlacementTabKey) => {
		const selectedWidget = store.getState().placements.selectedWidget;

		if (!selectedWidget) {
			alert('Please select a widget first');
			// todo: triggers re-render and ajax call of select widget. Fix
			setStep(PlacementTabKey.SelectWidget);
			return false;
		}

		setStep(newTab);
		return true;
	};

	return (
		<TabsMenu
			tabs={placementTabs}
			mt={subMenuMarginTop}
			variant={'clean'}
			activeKey={currentStep}
			onTabSelect={onTabSelect as any}
			containerProps={{
				css: `
				background-color: ${wpBg};
				position: sticky;
				top: 32px;
				z-index: 5;
			`,
			}}
		/>
	);
}

export default PlacementTab;