import React from 'react';
import { useStoreState } from '../store/store.hooks';
import { useAjax } from '../ajax/ajax.hooks';
import { Category, Tag } from '../models/wp';
import PlacementSelectTaxonomyContainer from './PlacementSelectTaxonomyContainer';
import PlacementSelectPositionContainer from './PlacementSelectPositionContainer';
import { borderRadius, Flex, Grid, Wrapper, WrapperProps } from 'dot-design-system';
import PlacementSelectFormatContainer from './PlacementSelectFormatContainer';
import PlacementPublishContainer from './PlacementPublishContainer';
import { sectionBg } from '../styles/colors';

interface Props {}

const configureWrapper: WrapperProps = {
	background: sectionBg,
	borderRadius,
	height: '100%',
	css: `
		> *:not(nav) {
			padding: 0 15px 15px;
		}
	`,
};

// todo: add the "after last" for paragraph and image
function PlacementConfigureContainer({}: Props) {
	const selectedWidget = useStoreState((state) => state.placements.selectedWidget);
	const data = useStoreState((state) => state.placements.data);

	if (!selectedWidget || !data) {
		return null;
	}

	return (
		<Grid
			columnLayout={'1fr 1fr 1fr 1fr'}
			gridGap={20}
			mt={30}
			alignItems={'flex-start'}
			css={`
				&& {
					@media (max-width: 1170px) {
						grid-template-columns: 1fr 1fr 1fr;
					}

					@media (max-width: 1020px) {
						grid-template-columns: 1fr 1fr;
					}

					@media (max-width: 610px) {
						grid-template-columns: 1fr;
					}
				}
			`}
		>
			<Wrapper {...configureWrapper}>
				<PlacementSelectTaxonomyContainer data={data} />
			</Wrapper>
			<Wrapper {...configureWrapper}>
				<PlacementSelectPositionContainer />
			</Wrapper>
			<Wrapper {...configureWrapper}>
				<PlacementSelectFormatContainer />
			</Wrapper>
			<Wrapper pt={77}>
				<PlacementPublishContainer />
			</Wrapper>
		</Grid>
	);
}

export default PlacementConfigureContainer;