"use client";

import { useState } from "react";
import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
import {
	KanbanBoard,
	KanbanCard,
	KanbanCards,
	KanbanHeader,
	KanbanProvider,
} from "~/components/ui/kanban";

const columns = [
	{ id: "todo", name: "To Do", color: "red" },
	{ id: "inprogress", name: "In Progress", color: "blue" },
	{ id: "done", name: "Done", color: "green" },
];
const exampleFeatures = [
	{
		id: "1",
		name: "Design new homepage",
		column: "todo",
		startAt: new Date("2024-06-01"),
		endAt: new Date("2024-06-10"),
		owner: {
			name: "Alice",
			image: "https://i.pravatar.cc/150?img=1",
		},
	},
	{
		id: "2",
		name: "Implement authentication",
		column: "inprogress",
		startAt: new Date("2024-06-05"),
		endAt: new Date("2024-06-15"),
		owner: {
			name: "Bob",
			image: "https://i.pravatar.cc/150?img=2",
		},
	},
	{
		id: "3",
		name: "Set up database",
		column: "done",
		startAt: new Date("2024-05-20"),
		endAt: new Date("2024-05-30"),
		owner: {
			name: "Charlie",
			image: "https://i.pravatar.cc/150?img=3",
		},
	},
];

const dateFormatter = new Intl.DateTimeFormat("en-US", {
	month: "short",
	day: "numeric",
	year: "numeric",
});
const shortDateFormatter = new Intl.DateTimeFormat("en-US", {
	month: "short",
	day: "numeric",
});
const Example = () => {
	const [features, setFeatures] = useState(exampleFeatures);
	return (
		<KanbanProvider
			columns={columns}
			data={features}
			onDataChange={setFeatures}
		>
			{(column) => (
				<KanbanBoard id={column.id} key={column.id}>
					<KanbanHeader>
						<div className="flex items-center gap-2">
							<div
								className="h-2 w-2 rounded-full"
								style={{ backgroundColor: column.color }}
							/>
							<span>{column.name}</span>
						</div>
					</KanbanHeader>
					<KanbanCards id={column.id}>
						{(feature: (typeof features)[number]) => (
							<KanbanCard
								column={column.id}
								id={feature.id}
								key={feature.id}
								name={feature.name}
							>
								<div className="flex items-start justify-between gap-2">
									<div className="flex flex-col gap-1">
										<p className="m-0 flex-1 font-medium text-sm">
											{feature.name}
										</p>
									</div>
									{feature.owner && (
										<Avatar className="h-4 w-4 shrink-0">
											<AvatarImage src={feature.owner.image} />
											<AvatarFallback>
												{feature.owner.name?.slice(0, 2)}
											</AvatarFallback>
										</Avatar>
									)}
								</div>
								<p className="m-0 text-muted-foreground text-xs">
									{shortDateFormatter.format(feature.startAt)} -{" "}
									{dateFormatter.format(feature.endAt)}
								</p>
							</KanbanCard>
						)}
					</KanbanCards>
				</KanbanBoard>
			)}
		</KanbanProvider>
	);
};
export default Example;