import React, { Fragment } from 'react';
import { borderRadius, Flex, Grid, Wrapper } from 'dot-design-system';
import { MdClose, MdEdit } from 'react-icons/md';
import { Placement } from './placements.models';
import { sectionBg } from '../styles/colors';
import {
	isAllTaxonomies,
	isNumeralInsertion,
	resolveFormat,
	resolveInsertionPointLabel,
} from './placements.utils';
import { capitalize } from '../utils/strings';
import { subMenuMarginTop } from '../layout/layout.constants';
import { pathSatisfies } from 'ramda';

interface Props {
	placements: Placement[];
	renderTaxonomy: (type: 'categories' | 'tags', id: number | string) => string;
	onDelete: (placement: Placement) => void;
	onEditClick: (placement: Placement) => void;
}

function SavedPlacementsTable({ placements, renderTaxonomy, onDelete, onEditClick }: Props) {
	let columnLayout = '1fr 1fr 1fr 1fr 1fr 1fr';

	if (!placements.length) {
		return null;
	}

	return (
		<Wrapper textAlign={'center'} mt={subMenuMarginTop}>
			<Grid
				columnLayout={columnLayout}
				fontSize={22}
				mb={20}
				css={`
					&& {
						@media (max-width: 770px) {
							font-size: 16px;
						}

						@media (max-width: 540px) {
							font-size: 13px;
						}
					}
				`}
			>
				<Wrapper>Widget</Wrapper>
				<Wrapper>Category / Tag</Wrapper>
				<Wrapper>Insertion</Wrapper>
				<Wrapper>Alignment</Wrapper>
				<Wrapper>Format</Wrapper>
			</Grid>
			{placements.map((placement) => {
				const taxonomies = placement.categories
					.map((id) => renderTaxonomy('categories', id))
					.concat(placement.tags.map((id) => renderTaxonomy('tags', id)));

				if (isAllTaxonomies(placement)) {
					taxonomies.unshift('All');
				}

				return (
					<Fragment key={placement.ID}>
						<Grid
							mb={5}
							alignItems={'center'}
							columnLayout={columnLayout}
							gridGap={5}
							background={sectionBg}
							borderRadius={borderRadius}
							fontSize={18}
							css={`
								> * {
									padding: 10px;
								}

								&& {
									> *:not(.saved-placements__icons) {
										@media (max-width: 770px) {
											font-size: 14px;
										}

										@media (max-width: 540px) {
											font-size: 10px;
											padding: 5px;
										}
									}
								}
							`}
						>
							<Wrapper>{placement.meta.widget_title}</Wrapper>
							<Wrapper>{taxonomies.join(', ')}</Wrapper>
							<Wrapper>
								{resolveInsertionPointLabel(placement.meta.insertion_point[0])}{' '}
								{isNumeralInsertion(placement.meta.insertion_point[0]) &&
									placement.meta.insertion_number}
							</Wrapper>
							<Wrapper>{capitalize(placement.meta.alignment[0])}</Wrapper>
							<Wrapper>
								{placement.meta.format[0]
									.split(',')
									.map(resolveFormat as any)
									.join(' & ')}
							</Wrapper>
							<Flex
								alignItems={'center'}
								justifyContent={'center'}
								css={'cursor: pointer'}
								className={'saved-placements__icons'}
							>
								<Flex
									alignItems={'center'}
									justifyContent={'flex-end'}
									p={5}
									onClick={() => onEditClick(placement)}
								>
									<MdEdit />
								</Flex>
								<Flex
									alignItems={'center'}
									justifyContent={'flex-end'}
									p={5}
									onClick={() => onDelete(placement)}
								>
									<MdClose />
								</Flex>
							</Flex>
						</Grid>
						<hr />
					</Fragment>
				);
			})}
		</Wrapper>
	);
}

export default SavedPlacementsTable;