import { useEffect, useState } from "react";
import VideoButton, { VideoAttributes } from "./Video/VideoButton";
import { usePage } from "@inertiajs/react";
import InputError from "../InputError";
import { Label } from "@/components/ui/label";
import { cn, GetTranslation } from "@/lib/utils";
import BtnOptionnalLinkWithTooltip from "../BtnOptionnalLinkWithTooltip";
import { RefreshCcw, Trash } from "lucide-react";
import str from "@/hooks/use-string";

interface Props {
    label: string;
    name: string;
    value: VideoAttributes | null;
    // eslint-disable-next-line no-unused-vars
    setData: (name: string, value: VideoAttributes | null) => void;
    className?: string;
    required?: boolean;
    disabled?: boolean;
    forcedFormat?: string;
    forcedProvider?: number;
    reset?: (name?: string) => void;
}

const VideoInput = (props: Props) => {
    const { name, setData, value, className, label, required = true, disabled = false, forcedFormat, forcedProvider, reset } = props;
    const { errors } = usePage().props;
    const [refresh, setRefresh] = useState(Date.now());

    useEffect(() => {
    }, [refresh]);

    return (
        <div
            className={cn(
                "flex flex-col w-full justify-between items-start gap-1.5",
                className,
            )}
        >
            <Label htmlFor={name}>{label + (required ? " *" : "")}</Label>
            <div className="flex w-full">
                <div className="w-full">
                    <VideoButton
                        disabled={disabled}
                        isSmallButton={false}
                        value={value}
                        key={refresh}
                        forcedFormat={forcedFormat}
                        forcedProvider={forcedProvider}
                        hasError={errors[name] ? true : false}
                        onValidateVideo={(value) => {
                            if (value) {
                                setData(name, {
                                    alt: value.alt,
                                    canFullScreen: value.canFullScreen,
                                    caption: value.caption,
                                    hasControls: value.hasControls,
                                    isMuted: value.isMuted,
                                    provider: value.provider,
                                    videoId: value.videoId,
                                    format: value.format,
                                })
                                setRefresh(Date.now())
                            } else {
                                setData(name, null)
                            }
                        }} />
                </div>
                <div>
                    <BtnOptionnalLinkWithTooltip
                        content={<RefreshCcw />}
                        tooltipContent={
                            <p>
                                {str(GetTranslation('back.input_video.tooltip.reset')).ucFirst().value()}
                            </p>
                        }
                        onClick={() => {
                            reset?.(name)
                            setRefresh(Date.now())
                        }}
                        size="sm"
                        className={cn(!required ? "h-40 rounded-r-md" : "h-20 rounded-b-none", " rounded-l-none")}
                        variant="secondary"
                    />

                    {
                        required && (
                            <BtnOptionnalLinkWithTooltip
                                content={<Trash />}
                                disabled={!value}
                                onClick={() => {
                                    setData(name, null)
                                    setRefresh(Date.now())
                                }}
                                tooltipContent={
                                    <p>
                                        {str(GetTranslation('back.input_video.tooltip.delete')).ucFirst().value()}
                                    </p>
                                }
                                size="sm"
                                className="h-20 rounded-t-none rounded-l-none"
                                variant="destructive"
                            />
                        )
                    }
                </div>
            </div>

            <InputError message={errors[name]} />
        </div>
    )
}
export default VideoInput;