edr-platform/apps/edr-freight-web/backoffice/src/user-management/components/user-position-approvals/UserPositionApprovalDecisionDialog.tsx

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/shared/common/ui/dialog";
import { Button } from "@/shared/common/ui/button";
import { Textarea } from "@/shared/common/ui/textarea";
import type { EmployeePositionChangeRequest } from "@/user-management/services/api/employeePositionChangeRequestService";
import type { UserPositionApprovalDecision } from "./UserPositionApprovalActions";

interface UserPositionApprovalDecisionDialogProps {
  decision: {
    type: UserPositionApprovalDecision;
    item: EmployeePositionChangeRequest;
  } | null;
  comment: string;
  isSubmitting: boolean;
  onCommentChange: (value: string) => void;
  onClose: () => void;
  onSubmit: () => void;
}

export default function UserPositionApprovalDecisionDialog({
  decision,
  comment,
  isSubmitting,
  onCommentChange,
  onClose,
  onSubmit,
}: UserPositionApprovalDecisionDialogProps) {
  return (
    <Dialog
      open={Boolean(decision)}
      onOpenChange={(open) => !open && !isSubmitting && onClose()}
    >
      <DialogContent>
        <DialogHeader>
          <DialogTitle>
            {decision?.type === "approve" ? "Approve" : "Reject"} position
            change request
          </DialogTitle>
          <DialogDescription>
            {decision?.type === "approve"
              ? "Confirm this employee position change request."
              : "Confirm that this employee position change request should be rejected."}
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-2">
          <label htmlFor="decision-comment" className="text-sm font-medium">
            Comment
          </label>
          <Textarea
            id="decision-comment"
            value={comment}
            onChange={(event) => onCommentChange(event.target.value)}
            placeholder="Add a comment for this decision"
            rows={4}
          />
        </div>
        <DialogFooter>
          <Button variant="outline" disabled={isSubmitting} onClick={onClose}>
            Cancel
          </Button>
          <Button
            variant={decision?.type === "reject" ? "destructive" : "default"}
            disabled={isSubmitting}
            onClick={onSubmit}
          >
            {isSubmitting
              ? "Submitting..."
              : decision?.type === "approve"
                ? "Approve"
                : "Reject"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}