import FormGroup from "@admin/ui/forms/FormGroup";
import FileUploadInput from "@admin/ui/forms/FileUploadInput";
import Switch from "@admin/ui/forms/Switch";
import Modal from "@admin/ui/Modal";
import { useEffect } from "react";
import { useFormResponse } from '@/hooks/useFormResponse';
import { useForm } from "@inertiajs/react";
export default function EditSlider( {isOpen, onClose, initialData }){
    const { data, setData, put, processing, errors } = useForm({
        title: '',
        description:'',
        status: true,
        media_type: 'image',
        photo: '',
        video: '',
    });

    useEffect(() => {
        if (initialData) {
          setData({
              title: initialData?.title || '',
              description: initialData?.description || '',
              status: initialData?.status === 1 || initialData?.status === true,
              media_type: initialData?.media_type === 'video' ? 'video' : 'image',
              photo: initialData?.photo || '',
              video: initialData?.video || '',
          });
        }
    }, [initialData, setData]);

    const handleSave = (event) => {
        event.preventDefault();
        const formResponse = useFormResponse(() => {
            onClose?.();
        });
        put(`/admin/api/update_slider/${initialData.id}`, {
            preserveScroll: true,
                onSuccess: formResponse.onSuccess,
                onError: formResponse.onError,
            });
    };

    const photoPreview = data.photo
        ? (data.photo.startsWith('http') || data.photo.startsWith('/') ? data.photo : `/storage/${data.photo}`)
        : '';

    return(
        <>
        <Modal isOpen={isOpen} onClose={onClose} title="Edit hero slide" size="large"
        primaryButtonText="Save Changes"
        onPrimaryAction={handleSave}
        processing={processing}
        >

        <form onSubmit={handleSave}>
            <FormGroup label="Title"
            value={data.title}
            onChange={(e) => setData('title', e.target.value)}
            invalidFeedback={errors.title}
            />

            <div className="form-group mb-3">
                <label htmlFor="editHeroMediaType">Media</label>
                <select
                    id="editHeroMediaType"
                    className="form-control"
                    value={data.media_type}
                    onChange={(e) => setData('media_type', e.target.value)}
                >
                    <option value="image">Image</option>
                    <option value="video">Video</option>
                </select>
            </div>

            {data.media_type === 'image' ? (
            <FileUploadInput
            inputId="editSliderHeroImage"
            accept="image/jpeg,image/png,image/webp"
            label="Image, recommended 1920×1000. Other sizes are accepted."
            buttonText={"Choose image"}
            uploadUrl="/admin/api/slider/upload_image"
            previewUrl={photoPreview}
            onSuccess={(filename) => setData('photo', filename)}
            onError={(error) => console.error('Upload error:', error)}/>
            ) : (
            <>
            <FileUploadInput
            inputId="editSliderHeroVideo"
            accept="video/mp4,video/webm,video/ogg,video/quicktime"
            label="Video file (MP4, WebM, or MOV)"
            buttonText={"Choose video"}
            uploadUrl="/admin/api/slider/upload_video"
            onSuccess={(filename) => setData('video', filename)}
            onError={(error) => console.error('Upload error:', error)}/>
            <FormGroup
            id="editHeroVideoUrl"
            label="Or paste a video link"
            value={data.video && String(data.video).startsWith('http') ? data.video : ''}
            helpText="A direct video file or a YouTube link. Uploading a file replaces this."
            onChange={(e) => setData('video', e.target.value)}
            invalidFeedback={errors.video}
            />
            </>
            )}
            {errors.photo && <div className="invalid-feedback d-block mb-3">{errors.photo}</div>}

            <Switch
            id="customSwitch"
            label="Active"
            checked={data.status}
            onChange={({ target: { checked } }) =>
                setData(prevData => ({ ...prevData, status: checked }))
                }
                />
                <br/>
            </form>

        </Modal>
        </>
    );
}