"use client"

import type { RefObject } from "react"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

export type SidebarCreateDialogsProps = {
  folderDialogOpen: boolean
  setFolderDialogOpen: (open: boolean) => void
  labelDialogOpen: boolean
  setLabelDialogOpen: (open: boolean) => void
  newFolderName: string
  setNewFolderName: (v: string) => void
  newFolderParent: string
  setNewFolderParent: (v: string) => void
  newLabelName: string
  setNewLabelName: (v: string) => void
  newFolderNameInputRef: RefObject<HTMLInputElement | null>
  newLabelNameInputRef: RefObject<HTMLInputElement | null>
  folderParentOptions: { value: string; label: string }[]
  onSubmitNewFolder: () => void
  onSubmitNewLabel: () => void
}

export function SidebarCreateDialogs({
  folderDialogOpen,
  setFolderDialogOpen,
  labelDialogOpen,
  setLabelDialogOpen,
  newFolderName,
  setNewFolderName,
  newFolderParent,
  setNewFolderParent,
  newLabelName,
  setNewLabelName,
  newFolderNameInputRef,
  newLabelNameInputRef,
  folderParentOptions,
  onSubmitNewFolder,
  onSubmitNewLabel,
}: SidebarCreateDialogsProps) {
  return (
    <>
<Dialog open={folderDialogOpen} onOpenChange={setFolderDialogOpen}>
        <DialogContent
          className="sm:max-w-md"
          showCloseButton
          onOpenAutoFocus={(e) => {
            e.preventDefault()
            window.requestAnimationFrame(() =>
              newFolderNameInputRef.current?.focus()
            )
          }}
        >
          <DialogHeader>
            <DialogTitle>Nouveau dossier</DialogTitle>
            <DialogDescription>
              Choisissez l’emplacement (racine ou dossier parent) puis le nom.
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-3 py-1">
            <div className="grid gap-2">
              <Label htmlFor="new-folder-parent">Emplacement</Label>
              <Select value={newFolderParent} onValueChange={setNewFolderParent}>
                <SelectTrigger id="new-folder-parent" className="w-full min-w-0" size="sm">
                  <SelectValue placeholder="Parent" />
                </SelectTrigger>
                <SelectContent position="popper" className="max-h-72">
                  {folderParentOptions.map((o) => (
                    <SelectItem key={o.value} value={o.value}>
                      {o.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="grid gap-2">
              <Label htmlFor="new-folder-name">Nom</Label>
              <Input
                id="new-folder-name"
                ref={newFolderNameInputRef}
                value={newFolderName}
                onChange={(e) => setNewFolderName(e.target.value)}
                placeholder="Mon dossier"
                autoComplete="off"
                onKeyDown={(e) => {
                  if (e.key === "Enter") {
                    e.preventDefault()
                    onSubmitNewFolder()
                  }
                }}
              />
            </div>
          </div>
          <DialogFooter>
            <Button
              variant="outline"
              type="button"
              onClick={() => setFolderDialogOpen(false)}
            >
              Annuler
            </Button>
            <Button type="button" onClick={onSubmitNewFolder}>
              Créer
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={labelDialogOpen} onOpenChange={setLabelDialogOpen}>
        <DialogContent
          className="sm:max-w-md"
          showCloseButton
          onOpenAutoFocus={(e) => {
            e.preventDefault()
            window.requestAnimationFrame(() =>
              newLabelNameInputRef.current?.focus()
            )
          }}
        >
          <DialogHeader>
            <DialogTitle>Nouveau libellé</DialogTitle>
            <DialogDescription>
              Nom affiché dans la barre latérale et utilisé sur les messages.
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-2 py-1">
            <Label htmlFor="new-label-name">Nom</Label>
            <Input
              id="new-label-name"
              ref={newLabelNameInputRef}
              value={newLabelName}
              onChange={(e) => setNewLabelName(e.target.value)}
              placeholder="Libellé"
              autoComplete="off"
              onKeyDown={(e) => {
                if (e.key === "Enter") {
                  e.preventDefault()
                  onSubmitNewLabel()
                }
              }}
            />
          </div>
          <DialogFooter>
            <Button
              variant="outline"
              type="button"
              onClick={() => setLabelDialogOpen(false)}
            >
              Annuler
            </Button>
            <Button type="button" onClick={onSubmitNewLabel}>
              Créer
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  )
}