"use client"

import { useEffect, useState } from "react"
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 {
  DRIVE_BTN_GHOST,
  DRIVE_BTN_PRIMARY,
  DRIVE_DIALOG_BODY,
  DRIVE_DIALOG_CONTENT,
  DRIVE_DIALOG_FOOTER,
  DRIVE_DIALOG_HEADER,
  DRIVE_FIELD_CLASS,
  DRIVE_LABEL_CLASS,
  DRIVE_TEXT_TITLE,
} from "@/lib/drive/drive-dialog-styles"
import { cn } from "@/lib/utils"

export function DocsListStartDialog({
  open,
  onOpenChange,
  initialStart,
  onApply,
}: {
  open: boolean
  onOpenChange: (open: boolean) => void
  initialStart: number
  onApply: (start: number) => void
}) {
  const [start, setStart] = useState(String(initialStart))

  useEffect(() => {
    if (open) setStart(String(initialStart))
  }, [initialStart, open])

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className={cn(DRIVE_DIALOG_CONTENT, "max-w-sm gap-0 p-0")}>
        <DialogHeader className={DRIVE_DIALOG_HEADER}>
          <DialogTitle className={cn("text-base font-medium", DRIVE_TEXT_TITLE)}>
            Numéro de départ
          </DialogTitle>
        </DialogHeader>
        <div className={DRIVE_DIALOG_BODY}>
          <Label className={DRIVE_LABEL_CLASS} htmlFor="docs-list-start">
            Commencer la liste à
          </Label>
          <Input
            id="docs-list-start"
            type="number"
            min={1}
            max={9999}
            step={1}
            value={start}
            onChange={(event) => setStart(event.target.value)}
            className={cn(DRIVE_FIELD_CLASS, "mt-2")}
          />
        </div>
        <DialogFooter className={DRIVE_DIALOG_FOOTER}>
          <Button type="button" variant="ghost" className={DRIVE_BTN_GHOST} onClick={() => onOpenChange(false)}>
            Annuler
          </Button>
          <Button
            type="button"
            className={DRIVE_BTN_PRIMARY}
            onClick={() => {
              onApply(Math.max(1, Number.parseInt(start, 10) || 1))
              onOpenChange(false)
            }}
          >
            Appliquer
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}