import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Button } from "@/components/ui/button"
import { Company, PopularityCategory } from '../types'

interface CompanyDialogProps {
  isOpen: boolean
  onOpenChange: (open: boolean) => void
  currentCompany: Company
  setCurrentCompany: (company: Company) => void
  onSubmit: () => void
  popularityCategories: PopularityCategory[]
}

export function CompanyDialog({
  isOpen,
  onOpenChange,
  currentCompany,
  setCurrentCompany,
  onSubmit,
  popularityCategories
}: CompanyDialogProps) {
  return (
    <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{currentCompany.id !== null ? "ویرایش شرکت" : "افزودن شرکت جدید"}</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={currentCompany.name}
              onChange={e => setCurrentCompany({ ...currentCompany, name: e.target.value })}
              placeholder="نام شرکت را وارد کنید"
            />
          </div>
          <div className="grid grid-cols-4 items-center gap-4">
            <label className="text-right">توضیحات:</label>
            <Textarea
              className="col-span-3"
              value={currentCompany.description}
              onChange={e => setCurrentCompany({ ...currentCompany, description: e.target.value })}
              placeholder="توضیح مختصری در مورد شرکت"
            />
          </div>
          <div className="grid grid-cols-4 items-center gap-4">
            <label className="text-right">محبوبیت:</label>
            <Select
              value={currentCompany.popularity}
              onValueChange={value => setCurrentCompany({ ...currentCompany, popularity: value as PopularityCategory })}
            >
              <SelectTrigger className="col-span-3">
                <SelectValue placeholder="انتخاب محبوبیت" />
              </SelectTrigger>
              <SelectContent>
                {popularityCategories.map(category => (
                  <SelectItem key={category} value={category}>{category}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>
        <DialogFooter>
          <Button onClick={onSubmit}>
            {currentCompany.id !== null ? "ذخیره تغییرات" : "افزودن"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}