import { Button } from '@/components/ui/button'
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { RecurrencePicker } from '@/components/recurrence-picker'

interface EventDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  editingId: string | null
  title: string
  setTitle: (title: string) => void
  description: string
  setDescription: (description: string) => void
  location: string
  setLocation: (location: string) => void
  url: string
  setUrl: (url: string) => void
  start: string
  setStart: (start: string) => void
  end: string
  setEnd: (end: string) => void
  allDay: boolean
  setAllDay: (allDay: boolean) => void
  recurrenceRule: string | undefined
  setRecurrenceRule: (rule: string | undefined) => void
  onSave: () => void
  onReset: () => void
}

export const EventDialog = ({
  open,
  onOpenChange,
  editingId,
  title,
  setTitle,
  description,
  setDescription,
  location,
  setLocation,
  url,
  setUrl,
  start,
  setStart,
  end,
  setEnd,
  allDay,
  setAllDay,
  recurrenceRule,
  setRecurrenceRule,
  onSave,
  onReset
}: EventDialogProps) => {
  const handleOpenChange = (val: boolean) => {
    if (!val) onReset()
    onOpenChange(val)
  }

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{editingId ? 'Edit Event' : 'Add Event'}</DialogTitle>
        </DialogHeader>
        <Input placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} />
        <textarea 
          className="border rounded p-2 w-full" 
          placeholder="Description"
          value={description} 
          onChange={e => setDescription(e.target.value)} 
        />
        <Input placeholder="Location" value={location} onChange={e => setLocation(e.target.value)} />
        <Input placeholder="URL" value={url} onChange={e => setUrl(e.target.value)} />
        <RecurrencePicker value={recurrenceRule} onChange={setRecurrenceRule} />

        <label className="flex items-center gap-2 mt-2">
          <input type="checkbox" checked={allDay} onChange={e => setAllDay(e.target.checked)} />
          All day event
        </label>
        {!allDay ? (
          <>
            <Input type="datetime-local" value={start} onChange={e => setStart(e.target.value)} />
            <Input type="datetime-local" value={end} onChange={e => setEnd(e.target.value)} />
          </>
        ) : (
          <>
            <Input type="date" value={start ? start.split('T')[0] : ''} onChange={e => setStart(e.target.value)} />
            <Input type="date" value={end ? end.split('T')[0] : ''} onChange={e => setEnd(e.target.value)} />
          </>
        )}
        <DialogFooter>
          <Button onClick={onSave}>{editingId ? 'Update' : 'Save'}</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}