"use client";
import React, { useCallback } from "react";
import { useTranslations } from "next-intl";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm, useFieldArray, SubmitHandler, UseFormProps, UseFormReturn } from "react-hook-form";
import { Form, FormGroup } from "react-compose-form";
import { MediaScope, MediaScopeHelpers } from "@/server/modules/media/types/media-scope.enum";
import { InputControl } from "@/components/form/control/input.control";
import { FileField } from "@/components/form/field/file.field";
import { MediaPreview } from "@/components/dashboard/media/media-preview";
import { SelectControl } from "@/components/form/control/select.control";
import { SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { MediaCreateManyValidator } from "@/server/modules/media/validators/media-create-many.validator";

export type MediaCreateManyFormValues = z.infer<typeof MediaCreateManyValidator>;

export const useMediaCreateManyForm = (props: Omit<UseFormProps<MediaCreateManyFormValues>, "resolver"> = {}): UseFormReturn<MediaCreateManyFormValues> => {
    return useForm<MediaCreateManyFormValues>({
        values: {
            data: []
        },
        ...props,
        resolver: zodResolver(MediaCreateManyValidator)
    });
};

type MediaCreateManyFormProps = {
    id?: string;
    control?: UseFormReturn<MediaCreateManyFormValues>;
    scope?: MediaScope;
    acceptedFileTypes?: string[];
    onSubmit?: SubmitHandler<MediaCreateManyFormValues>;
};

export const MediaCreateManyForm: React.FC<MediaCreateManyFormProps> = (props) => {
    const {
        id,
        control,
        scope,
        acceptedFileTypes,
        onSubmit
    } = props;

    const form = useMediaCreateManyForm({
        formControl: control
    });

    const t = useTranslations();

    const {
        fields,
        append,
        remove
    } = useFieldArray<MediaCreateManyFormValues, "data", "_key">({
        control: form.control,
        name: "data",
        keyName: "_key"
    });

    const handleMedia = useCallback((files: File[]) => {
        for(const file of files) {
            append({
                scope: scope as MediaScope,
                alt: "",
                author: "",
                caption: "",
                file: file
            });
        }
    }, [append, scope]);

    return (
        <Form<MediaCreateManyFormValues>
          id={id}
          formControl={form}
          resolver={zodResolver(MediaCreateManyValidator)}
          onSubmit={onSubmit}>
            <div className="flex flex-col gap-6">
                <FileField
                  multiple
                  acceptedFileTypes={acceptedFileTypes}
                  onChange={handleMedia} />

                {fields.map((field, index) => {
                    return (
                        <FormGroup key={field._key} name={`data.${index}`}>
                            <InputControl
                              type="hidden"
                              name="file" />

                            <div className="flex gap-2">
                                <MediaPreview
                                  size={100}
                                  file={field.file}
                                  onDelete={() => remove(index)} />

                                <div className="flex flex-col gap-3 flex-1">
                                    {scope && (
                                        <InputControl type="hidden" name="scope" />
                                    )}

                                    {!scope && (
                                        <SelectControl
                                          label="Omfang"
                                          name="scope">
                                            <SelectTrigger className="w-full">
                                                <SelectValue placeholder="Vælg et omfang" />
                                            </SelectTrigger>

                                            <SelectContent>
                                                {Object.entries(MediaScope).map(([, scope]) => {
                                                    return (
                                                        <SelectItem key={scope} value={scope}>
                                                            {MediaScopeHelpers.getLabel(scope)}
                                                        </SelectItem>
                                                    );
                                                })}
                                            </SelectContent>
                                        </SelectControl>
                                    )}

                                    <InputControl
                                      label={t("dashboard.media.editor.fields.alt.label")}
                                      placeholder={t("dashboard.media.editor.fields.alt.placeholder")}
                                      name="alt" />

                                    <InputControl
                                      label={(t("dashboard.media.editor.fields.caption.label"))}
                                      placeholder={(t("dashboard.media.editor.fields.caption.placeholder"))}
                                      name="caption" />

                                    <InputControl
                                      label={(t("dashboard.media.editor.fields.author.label"))}
                                      placeholder={(t("dashboard.media.editor.fields.author.placeholder"))}
                                      name="author" />
                                </div>
                            </div>
                        </FormGroup>
                    );
                })}
            </div>
        </Form>
    );
};