// * Other
import SimpleString from "@/back/Components/Inputs/SimpleString";
import SimpleSwitch from "@/back/Components/Inputs/SimpleSwitch";
import useTrans from "@/hooks/use-translations";
import str from "@/hooks/use-string";
import { InputVideoValues } from "./VideoButton";
import { Separator } from "@/components/ui/separator";
import { ReactNode } from "react";

type VideoInputsProps = {
    value: InputVideoValues;
    onChange: (value: InputVideoValues) => void;
    errors?: Record<string, string>;
    disabled?: boolean;
    loading?: boolean;
};

export default function VideoInputs({
    value,
    onChange,
    errors = {},
    disabled = false,
    loading = false,
}: VideoInputsProps) {
    const transVideoCaption = useTrans("back.input_video.caption");
    return (
        <>

            {/* Input alt attribute of the image. */}
            <SimpleString
                name="alt"
                label={str(useTrans("back.input_video.alt"))
                    .ucFirst()
                    .value()}
                placeholder="ex: John Doe"
                required
                value={value.alt}
                setData={(_, v) => onChange({ ...value, alt: v })}
                disabled={disabled || loading}
                parentErrors={errors}
            />

            <SimpleSwitchLayout>
                {/* Input switch to set the caption visibility. */}
                <SimpleSwitch
                    label={str(useTrans("back.input_video.has_caption"))
                        .ucFirst()
                        .value()}
                    leftHelper={str(useTrans("back.no")).ucFirst().value()}
                    rightHelper={str(useTrans("back.yes")).ucFirst().value()}
                    name="hasCaption"
                    checked={value.hasCaption}
                    setData={(_, v) =>
                        onChange({
                            ...value,
                            hasCaption: v,
                            caption: v ? value.caption : null,
                        })
                    }
                />
                {/* Input caption of the video. */}
                {value.hasCaption && (
                    <div className="px-4">
                        <Separator className="my-4" />
                        <SimpleString
                            name="caption"
                            label={str(transVideoCaption).ucFirst().value()}
                            placeholder="ex: John Doe"
                            required={false}
                            value={value.caption ?? ""}
                            setData={(_, v) => onChange({ ...value, caption: v })}
                            disabled={disabled || loading}
                            parentErrors={errors}
                        />
                    </div>
                )}
            </SimpleSwitchLayout>
            <Separator className="my-1" />
            <SimpleSwitchLayout>
                <SimpleSwitch
                    label={str(useTrans("back.input_video.is_muted"))
                        .ucFirst()
                        .value()}
                    leftHelper={str(useTrans("back.no")).ucFirst().value()}
                    rightHelper={str(useTrans("back.yes")).ucFirst().value()}
                    name="isMuted"
                    checked={value.isMuted}
                    setData={(_, v) =>
                        onChange({
                            ...value,
                            isMuted: v,
                        })
                    }
                    parentErrors={errors}
                />
            </SimpleSwitchLayout>
            <Separator className="my-1" />
            <SimpleSwitchLayout>
                <SimpleSwitch
                    label={str(useTrans("back.input_video.has_controls"))
                        .ucFirst()
                        .value()}
                    leftHelper={str(useTrans("back.no")).ucFirst().value()}
                    rightHelper={str(useTrans("back.yes")).ucFirst().value()}
                    name="hasControls"
                    checked={value.hasControls}
                    setData={(_, v) =>
                        onChange({
                            ...value,
                            hasControls: v,
                        })
                    }
                    parentErrors={errors}
                />
                {value.hasControls && (
                    <div className="px-4">
                        <Separator className="my-4" />
                        <SimpleSwitch
                            label={str(useTrans("back.input_video.can_fullScreen"))
                                .ucFirst()
                                .value()}
                            leftHelper={str(useTrans("back.no")).ucFirst().value()}
                            rightHelper={str(useTrans("back.yes")).ucFirst().value()}
                            name="canFullScreen"
                            checked={value.canFullScreen}
                            setData={(_, v) =>
                                onChange({
                                    ...value,
                                    canFullScreen: v,
                                })
                            }
                            parentErrors={errors}
                        />
                    </div>
                )}
            </SimpleSwitchLayout>
        </>
    );
}

const SimpleSwitchLayout = ({ children }: { children: ReactNode }) => {
    return (
        <div className="border-l border-1 h-full p-4">
            {children}
        </div>
    )
}