"use client";

import { useState } from "react";

import {
	LegacyPickerColumn,
	LegacyPickerContainer,
} from "@/components/legacy-wheel-picker";

const frameworkOptions = [
	{ label: "React", value: "react" },
	{ label: "Vue", value: "vue" },
	{ label: "Angular", value: "angular", disabled: true },
	{ label: "Svelte", value: "svelte" },
];

export function LegacyBasicPickerDemo() {
	const [value, setValue] = useState("react");

	return (
		<div className="flex w-full max-w-[320px] flex-col items-center gap-6">
			<LegacyPickerContainer className="w-full">
				<LegacyPickerColumn
					align="center"
					fontSize={22}
					onValueChange={setValue}
					options={frameworkOptions}
					value={value}
				/>
			</LegacyPickerContainer>
		</div>
	);
}

"use client";

import { useState } from "react";

import {
	LegacyPickerColumn,
	LegacyPickerContainer,
} from "@/components/legacy-wheel-picker";

const hours = Array.from({ length: 12 }, (_, index) => ({
	label: String(index + 1),
	value: index + 1,
}));

const minutes = Array.from({ length: 60 }, (_, index) => ({
	label: String(index).padStart(2, "0"),
	value: index,
}));

const meridiem = [
	{ label: "AM", value: "AM" },
	{ label: "PM", value: "PM" },
];

export function LegacyTimePickerExample() {
	const [hour, setHour] = useState(10);
	const [minute, setMinute] = useState(41);
	const [ampm, setAmpm] = useState("AM");

	return (
		<LegacyPickerContainer
			className="relative w-full shrink-0 overflow-hidden"
			frameWidth="100%"
			width="100%"
		>
			<div className="relative z-[3] flex flex-[1.2] shrink-0 border-[#000]/20 border-r shadow-[1px_0_0_0_rgba(255,255,255,0.3)]">
				<LegacyPickerColumn
					align="center"
					fontSize={25}
					onValueChange={setHour}
					options={hours}
					padX={15}
					value={hour}
				/>
			</div>
			<div className="relative z-[2] flex flex-[1] shrink-0 border-[#000]/20 border-r shadow-[1px_0_0_0_rgba(255,255,255,0.3)]">
				<LegacyPickerColumn
					align="center"
					fontSize={25}
					onValueChange={setMinute}
					options={minutes}
					padX={10}
					value={minute}
				/>
			</div>
			<div className="relative z-[1] flex flex-[1.2] shrink-0">
				<LegacyPickerColumn
					align="center"
					fontSize={20}
					infinite={false}
					onValueChange={setAmpm}
					options={meridiem}
					padX={15}
					value={ampm}
				/>
			</div>
		</LegacyPickerContainer>
	);
}

"use client";

import { useState } from "react";

import {
	LegacyPickerColumn,
	LegacyPickerContainer,
} from "@/components/legacy-wheel-picker";

const paceOptions = [
	{ label: "Slow", value: "slow" },
	{ label: "Normal", value: "normal" },
	{ label: "Fast", value: "fast" },
	{ label: "Ludicrous", value: "ludicrous", disabled: true },
];

export function LegacyWheelPickerFiniteExample() {
	const [pace, setPace] =
		useState<(typeof paceOptions)[number]["value"]>("normal");

	return (
		<div className="flex w-full max-w-[320px] flex-col items-center gap-4">
			<LegacyPickerContainer className="w-full">
				<LegacyPickerColumn
					align="center"
					fontSize={22}
					infinite={false}
					onValueChange={setPace}
					options={paceOptions}
					value={pace}
				/>
			</LegacyPickerContainer>
			<p className="font-medium text-[#8b9bb4] text-sm">
				Selected pace: <span className="text-white capitalize">{pace}</span>
			</p>
		</div>
	);
}

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import type { SubmitHandler } from "react-hook-form";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { LegacyBarButton } from "@/components/legacy-bar-button";
import { showLegacyNotification } from "@/components/legacy-notification";
import {
	LegacyPickerColumn,
	LegacyPickerContainer,
} from "@/components/legacy-wheel-picker";
import {
	Form,
	FormControl,
	FormField,
	FormItem,
	FormLabel,
	FormMessage,
} from "@/components/ui/form";

const formSchema = z.object({
	framework: z.string(),
});

type FormSchema = z.infer<typeof formSchema>;

const formOptions = [
	{ label: "Vite", value: "vite" },
	{ label: "Laravel", value: "laravel", disabled: true },
	{ label: "Next.js", value: "nextjs" },
	{ label: "Astro", value: "astro" },
];

export function LegacyHookFormDemo() {
	const form = useForm<FormSchema>({
		resolver: zodResolver(formSchema),
		defaultValues: { framework: "nextjs" },
	});

	const onSubmit: SubmitHandler<FormSchema> = (values) => {
		const selectedFramework = formOptions.find(
			(option) => option.value === values.framework,
		)?.label;

		showLegacyNotification({
			body: "Selection synced with the form state.",
			showIcon: false,
			subtitle: selectedFramework ?? "Framework",
			time: "now",
			title: "Settings Saved",
		});
	};

	return (
		<Form {...form}>
			<form
				onSubmit={form.handleSubmit(onSubmit)}
				className="flex w-full max-w-[320px] flex-col gap-6"
			>
				<FormField
					control={form.control}
					name="framework"
					render={({ field }) => (
						<FormItem className="flex w-full flex-col items-center">
							<FormLabel className="sr-only">Framework</FormLabel>
							<FormControl>
								<LegacyPickerContainer className="w-full">
									<LegacyPickerColumn
										align="center"
										fontSize={22}
										onValueChange={field.onChange}
										options={formOptions}
										value={field.value}
									/>
								</LegacyPickerContainer>
							</FormControl>
							<FormMessage />
						</FormItem>
					)}
				/>
				<LegacyBarButton
					className="w-full justify-center"
					label="Submit"
					type="submit"
					variant="accent"
				/>
			</form>
		</Form>
	);
}