import * as React from 'react';
import Link from 'next/link';
import {Layouts} from '@tesseract-design/viewfinder-react';
import * as WebNavigationReact from '@tesseract-design/web-navigation-react';
import {FeedItem, FeedItemProps} from '@/components/molecules/FeedItem';
import {FeedItemHeading} from '@/components/molecules/FeedItemHeading';

interface MakeSectionDatum extends FeedItemProps {
	id: string;
	url: string;
}

export interface MakeSectionProps {
	data: MakeSectionDatum[];
}

export const MakeSection: React.FC<MakeSectionProps> = ({
	data,
}) => {
	const groupedData = data.reduce(
		(grouped, datum) => ({
			...grouped,
			[datum.date.getFullYear()]: [
				...(grouped[datum.date.getFullYear()] ?? []),
				datum,
			],
		}),
		{} as Record<string, MakeSectionDatum[]>,
	);

	return (
		<div className="py-12 sm:py-24 flex items-center min-h-full relative bg-negative">
			<div
				className="absolute top-0 left-0 w-full h-full bg-shade opacity-25"
			/>
			<Layouts.Basic.ContentContainer
				span="wide"
				className="relative"
			>
				<div className="pb-8">
					<h2 className="text-base leading-none m-0">
					<span className="text-7xl sm:text-8xl">
						I
						{' '}
						<Link
							className="no-underline px-1 -mx-1"
							href={{
								query: {
									feed: 'all',
								},
							}}
						>
							make.
						</Link>
					</span>
					</h2>
					<div className="flex gap-2 font-headings lowercase text-3xl sm:text-4xl leading-none font-normal">
						<div><Link href={{ query: { feed: 'software' }}} className="p-1 -m-1 after:content-['.']">Software</Link></div>
						<div><Link href={{ query: { feed: 'music' }}} className="p-1 -m-1 after:content-['.']">Music</Link></div>
						<div><Link href={{ query: { feed: 'art' }}} className="p-1 -m-1 after:content-['.']">Art</Link></div>
					</div>
				</div>
				<div
					className="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 gap-2"
				>
					{Object.entries(groupedData).map(([year, data]) => (
						<section
							key={year}
							className="contents"
						>
							<h3
								className="text-base m-0"
							>
								<a
									href="#"
									className="block"
								>
									<FeedItemHeading>
										{year}
									</FeedItemHeading>
								</a>
							</h3>
							<div className="contents">
								{data.map(({ id, ...datum }) => (
									<div
										key={id}
									>
										<a href="#" className="block">
											<FeedItem {...datum} />
										</a>
									</div>
								))}
							</div>
						</section>
					))}
				</div>
				<div className="flex justify-end mt-8">
					<div className="w-40">
						<WebNavigationReact.LinkButton
							component={Link as unknown as 'a'}
							href={{
								pathname: '/feed',
							} as unknown as string}
							menuItem
							block
							subtext="Feed"
						>
							Browse
						</WebNavigationReact.LinkButton>
					</div>
				</div>
			</Layouts.Basic.ContentContainer>
		</div>
	);
}
