"use client";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { FIX_PACKAGES_ADMIN } from "@/lib/strings/fix-packages-admin";
import type { PackageImageInput } from "@/lib/validations/fix-packages";
import { useEffect, useState } from "react";

export interface ImageDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSave: (data: PackageImageInput) => void;
  defaultValues?: Partial<PackageImageInput> | null;
}

export function ImageDialog({
  open,
  onOpenChange,
  onSave,
  defaultValues,
}: ImageDialogProps) {
  const [image, setImage] = useState<File | null>(
    (defaultValues?.image as File | null) ?? null
  );
  const [name, setName] = useState(defaultValues?.name ?? "");
  const [desc, setDesc] = useState(defaultValues?.description ?? "");

  useEffect(() => {
    if (open) {
      setImage((defaultValues?.image as File | null) ?? null);
      setName(defaultValues?.name ?? "");
      setDesc(defaultValues?.description ?? "");
    }
  }, [open, defaultValues]);

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{FIX_PACKAGES_ADMIN.IMAGE_DIALOG_TITLE}</DialogTitle>
        </DialogHeader>
        <div className="space-y-4 py-4">
          <div className="grid gap-2">
            <Label>{FIX_PACKAGES_ADMIN.IMAGE_DIALOG_IMAGE_LABEL}</Label>
            <Input
              type="file"
              onChange={(e) => setImage(e.target.files?.[0] ?? null)}
            />
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            {FIX_PACKAGES_ADMIN.DIALOG_CANCEL}
          </Button>
          <Button onClick={() => onSave({ image, name, description: desc })}>
            {FIX_PACKAGES_ADMIN.DIALOG_SAVE}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}