import { JSX } from 'preact'
import { getStyleScope, useSmartStylesheet } from ':plugins/SmartStylesheet.tsx'

type ProjectCardProps = {
	id: string
	icon: string
	title: string
	summary: string
	tags: string[]
	state: 'complete' | 'progress' | 'stale' | 'pending'
}

const scope = getStyleScope(ProjectCard)

export function ProjectCard(
	{ id, icon, title, summary, tags, state }: ProjectCardProps,
) {
	useSmartStylesheet(import.meta, { scope })

	return (
		<div class={scope}>
			<img
				alt='Icon du projet'
				src={icon}
				class='icon'
			/>
			<div class='content'>
				<h3>{title}</h3>
				<div class='state'>
					{toStateSpan(state)}
				</div>
				<div class='tags'>
					{tags.map((tag, index) => <span key={index}>{tag}</span>)}
				</div>
				<div class='summary'>
					{`${summary.slice(0, 150)} ...`}
				</div>
				<a href={`/projets/${id}`}>
					{state === 'complete' ? 'En savoir plus' : 'Participer'}
				</a>
			</div>
		</div>
	)
}

const summary =
	'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, perferendis enim blanditiis consequatur at porro quod, eligendi alias recusandae modi aliquam non? Quos voluptates quisquam provident animi nisi in ratione.'

export const projectMock: ProjectCardProps[] = Array(50).fill(undefined).map(
	(_, index) => {
		return {
			title: `Awesome project ${index}`,
			summary,
			tags: ['3D', 'électronique', 'informatique'],
			state: randomState(),
			icon: `https://picsum.photos/id/${index + 20}/300`,
			id: String(index),
		}
	},
)

function randomState(): ProjectCardProps['state'] {
	const rand = Math.random()
	if (rand > 3 / 4) return 'complete'
	if (rand > 2 / 4) return 'progress'
	if (rand > 1 / 4) return 'stale'
	return 'pending'
}

function toStateSpan(state: ProjectCardProps['state']): JSX.Element {
	if (state === 'complete') {
		return (
			<>
				<i class='ri-checkbox-circle-line'></i>
				{' Terminé'}
			</>
		)
	}
	if (state === 'pending') {
		return (
			<>
				<i class='ri-error-warning-line'></i>
				{' Non démarré'}
			</>
		)
	}
	if (state === 'progress') {
		return (
			<>
				<i class='ri-play-circle-line'></i>
				{' En cours'}
			</>
		)
	}
	return (
		<>
			<i class='ri-pause-circle-line'></i>
			{' En pause'}
		</>
	)
}