nextjs_zzyxyz/components/markcard/EditMarkCardModal.tsx

'use client'

import { useState } from 'react'
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { MarkCardI } from '@/lib/markcard/card'

interface EditCardModalProps {
  isOpen: boolean
  onClose: () => void
  cardData: MarkCardI
  onSave: (updatedData: Partial<EditCardModalProps['cardData']>) => void
}

export default function EditCardModal({ isOpen, onClose, cardData, onSave }: EditCardModalProps) {
  const [editedData, setEditedData] = useState(cardData)

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setEditedData((prev) => ({ ...prev, [name]: value }))
  }

  const handleLinkChange = (index: number, field: 'title' | 'url', value: string) => {
    setEditedData((prev) => ({
      ...prev,
      links: prev.links.map((link, i) => (i === index ? { ...link, [field]: value } : link)),
    }))
  }

  const handleAddLink = () => {
    setEditedData((prev) => ({
      ...prev,
      links: [...prev.links, { title: '', url: '' }],
    }))
  }

  const handleRemoveLink = (index: number) => {
    setEditedData((prev) => ({
      ...prev,
      links: prev.links.filter((_, i) => i !== index),
    }))
  }

  const handleSave = () => {
    onSave(editedData)
  }

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[425px] max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>Edit Card</DialogTitle>
          <DialogDescription>
            Here you can modify the card details and links. Click `Save changes` after you are done.
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="title" className="text-right">
              Title
            </Label>
            <Input
              id="title"
              name="title"
              value={editedData.title}
              onChange={handleInputChange}
              className="col-span-3"
            />
          </div>
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="shortDescription" className="text-right">
              Short Description
            </Label>
            <Input
              id="shortDescription"
              name="shortDescription"
              value={editedData.shortDescription}
              onChange={handleInputChange}
              className="col-span-3"
            />
          </div>
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="detailedDescription" className="text-right">
              Detailed Description
            </Label>
            <Textarea
              id="detailedDescription"
              name="detailedDescription"
              value={editedData.detailedDescription}
              onChange={handleInputChange}
              className="col-span-3"
            />
          </div>
          <div className="overflow-y-auto max-h-[40vh]">
            {editedData.links.map((link, index) => (
              <div key={index} className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor={`link-${index}`} className="text-right">
                  Link {index + 1}
                </Label>
                <div className="col-span-3 grid gap-2">
                  <Input
                    id={`link-${index}-title`}
                    value={link.title}
                    onChange={(e) => handleLinkChange(index, 'title', e.target.value)}
                    placeholder="Link Title"
                  />
                  <Input
                    id={`link-${index}-url`}
                    value={link.url}
                    onChange={(e) => handleLinkChange(index, 'url', e.target.value)}
                    placeholder="Link URL"
                  />
                  <Button type="button" variant="destructive" onClick={() => handleRemoveLink(index)}>
                    Remove Link
                  </Button>
                </div>
              </div>
            ))}

          </div>
          <Button type="button" onClick={handleAddLink} className="mt-4">
            Add Link
          </Button>
        </div>
        <DialogFooter>
          <Button type="submit" onClick={handleSave}>Save changes</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}