import * as React from 'react';
import {Layouts} from '@tesseract-design/viewfinder-react';
import * as WebNavigationReact from '@tesseract-design/web-navigation-react';

interface IframeShowcaseProps extends Omit<React.HTMLProps<HTMLElementTagNameMap['iframe']>, 'children'> {
	type: 'iframe';
}

interface ImageShowcaseProps extends Omit<React.HTMLProps<HTMLElementTagNameMap['img']>, 'alt'> {
	type: 'img';
}

type ShowcaseProps = IframeShowcaseProps | ImageShowcaseProps;

interface FeaturedProjectLink {
	href: string;
	children: React.ReactNode;
	primary?: boolean;
	subtext?: React.ReactNode;
}

export interface FeaturedProjectSectionProps {
	title: string;
	description: string;
	links?: FeaturedProjectLink[];
	showcase: ShowcaseProps;
}

export const FeaturedProjectSection: React.FC<FeaturedProjectSectionProps> = ({
	title,
	description,
	links = [],
	showcase,
}) => {
	const { type: showcaseType, ...showcaseProps } = showcase;

	return (
		<div className="pt-24 sm:py-24 flex flex-col gap-8 sm:flex-row items-center sm:min-h-full bg-negative relative group">
			<div
				className="absolute top-0 left-0 w-full h-full bg-shade opacity-25 group-even:opacity-0"
			/>
			<div className="sm:absolute top-0 left-0 w-full h-full">
				<Layouts.Basic.ContentContainer
					span="wide"
					className="relative sm:h-full"
				>
					<div className="sm:grid sm:grid-cols-5 sm:gap-32 sm:h-full">
						<div className="col-start-1 group-even:col-start-3 col-span-3 flex flex-col justify-center h-full gap-8">
							<h3 className="m-0 text-5xl font-light">{title}</h3>
							<p className="m-0">{description}</p>
							<div className="flex flex-wrap flex-row gap-4">
								{links.map(({ href, primary, subtext, children }) => (
									<div
										key={href}
									>
										<WebNavigationReact.LinkButton
											component="a"
											href={href}
											variant={primary ? 'filled' : 'outline'}
											subtext={subtext}
											target="_blank"
										>
											{children}
										</WebNavigationReact.LinkButton>
									</div>
								))}
							</div>
						</div>
					</div>
				</Layouts.Basic.ContentContainer>
			</div>
			<div
				className="border-0 m-0 sm:absolute sm:top-0 sm:right-0 group-even:sm:left-0 group-even:sm:right-0 w-full sm:w-2/5 h-96 sm:h-full"
			>
				{showcaseType === 'iframe' && (
					<iframe
						{...showcaseProps as Omit<IframeShowcaseProps, 'type'>}
						className={`border-0 m-0 w-full h-full ${showcaseProps.className ?? ''}`.trim()}
					>
						Cannot display embedded content.
					</iframe>
				)}
				{showcaseType === 'img' && (
					<img
						{...showcaseProps as Omit<ImageShowcaseProps, 'type'>}
						className={`object-cover object-center border-0 m-0 w-full h-full block ${showcaseProps.className ?? ''}`.trim()}
						alt={title}
					/>
				)}
			</div>
		</div>
	);
};
