import React, { useCallback } from "react";
import { useFieldArray } from "react-hook-form";
import { useFormGroupName, FormGroup } from "react-compose-form";
import { Plus, Trash } from "lucide-react";
import { InputControl } from "@/components/form/control/input.control";
import { Button } from "@/components/ui/button";
import { FormLabel } from "@/components/form/form-label";
import { FormMessage } from "@/components/form/form-message";

type Props = {
    label?: string;
    name: string;
};

export const PollQuestionOptionCollection: React.FC<Props> = (props) => {
    const {
        label,
        name
    } = props;

    const fullName = useFormGroupName(name);

    const {
        append,
        remove,
        fields
    } = useFieldArray<{
        [key: typeof fullName]: {
            label: string;
            value: string;
        }[];
    }, string, "_key">({
        name: fullName,
        keyName: "_key"
    });

    const handleAddOption = useCallback(() => {
        append({
            label: "",
            value: ""
        });
    }, [append]);

    return (
        <div className="flex flex-col gap-2">
            <div className="flex justify-between items-end">
                <div>
                    {label && (
                        <FormLabel name={name}>
                            {label}
                        </FormLabel>
                    )}
                </div>

                <Button
                  type="button"
                  size="icon"
                  variant="outline"
                  onClick={handleAddOption}>
                    <Plus />
                </Button>
            </div>

            <div className="flex flex-col gap-2">
                {fields.map((field, index) => {
                    return (
                        <FormGroup key={field._key} name={`${name}.${index}`}>
                            <div className="flex gap-2">
                                <div className="flex-1">
                                    <InputControl
                                      label="Label"
                                      name="label" />
                                </div>

                                <div className="flex-1">
                                    <InputControl
                                      label="Value"
                                      name="value" />
                                </div>

                                <Button
                                  className="mt-5"
                                  type="button"
                                  variant="destructive"
                                  size="icon"
                                  onClick={() => remove(index)}>
                                    <Trash />
                                </Button>
                            </div>
                        </FormGroup>
                    );
                })}
            </div>

            <FormMessage absolute name={fullName} />
        </div>
    );
};