import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Button } from "@/components/ui/button"
import { CommandType } from '../types'

interface CommandDialogProps {
  isOpen: boolean
  onOpenChange: (open: boolean) => void
  currentCommand: CommandType
  setCurrentCommand: (command: CommandType) => void
  onSubmit: () => void
}

export function CommandDialog({
  isOpen,
  onOpenChange,
  currentCommand,
  setCurrentCommand,
  onSubmit
}: CommandDialogProps) {
  return (
    <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>
            {currentCommand.id ? "ویرایش دستور" : "افزودن دستور جدید"}
          </DialogTitle>
        </DialogHeader>
        <div className="grid gap-4 py-2">
          <div className="grid grid-cols-4 items-center gap-4">
            <label className="text-right">دستور:</label>
            <Input
              className="col-span-3"
              value={currentCommand.command}
              onChange={(e) => setCurrentCommand({ ...currentCommand, command: e.target.value })}
              placeholder="مثال: /wallets"
            />
          </div>
          <div className="grid grid-cols-4 items-start gap-4">
            <label className="text-right">مقدار:</label>
            <Textarea
              className="col-span-3"
              value={currentCommand.value}
              onChange={(e) => setCurrentCommand({ ...currentCommand, value: e.target.value })}
              placeholder="مقدار نمایش داده شده را وارد کنید..."
              rows={5}
            />
          </div>
          <div className="grid grid-cols-4 items-start gap-4">
            <label className="text-right">پرامپت:</label>
            <Textarea
              className="col-span-3"
              value={currentCommand.prompt}
              onChange={(e) => setCurrentCommand({ ...currentCommand, prompt: e.target.value })}
              placeholder="پرامپت مربوط به این دستور را وارد کنید..."
              rows={3}
            />
          </div>
        </div>
        <DialogFooter>
          <Button onClick={onSubmit}>
            {currentCommand.id ? "ذخیره تغییرات" : "افزودن"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}