import { forwardRef } from "react";
import { FormField, FormItem, FormMessage } from "@/components/ui/form";
import { Popover, PopoverContent, PopoverPortal, PopoverTrigger } from "@radix-ui/react-popover";
import GenresTrigger from "./genresTrigger";
import GenreCheckbox from "./genreCheckbox";

export const GenrePicker = forwardRef(
	({ form, genres }, ref) => (
		<FormField
			control={form.control}
			name="genres"
			render={({ field }) => (
				<FormItem className="flex flex-col">
					<Popover>
						<GenresTrigger value={field.value} genres={genres} />
						<PopoverContent ref={ref}>
							{genres.map((item) => (
								<FormField
									key={item.id}
									control={form.control}
									name="genres"
									render={({ field }) => {
										return (
											<GenreCheckbox field={field} item={item} />
										)
									}}
								/>
							))}
						</PopoverContent>
					</Popover>
					<FormMessage />
				</FormItem>
			)}
		/>
	)
)