import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Plus, X } from "lucide-react";
import { Button } from "../../components/ui/button";
import { CountBadge } from "../../components/ui/badge";
import { Input } from "../../components/ui/input";
import { PreconfiguredReviewerSelector } from "./PreconfiguredReviewerSelector";
export function CreateReviewReviewersStep({ items, itemIds, language, reviewers, setReviewers, newReviewer, setNewReviewer, addReviewer, removeReviewer, isValidEmail, emailAlreadyExists, }) {
    return (_jsxs("div", { className: "grid min-h-full grid-cols-1 gap-6 p-4 md:grid-cols-2 md:p-6", children: [_jsxs("div", { className: "flex flex-col gap-5", children: [items.length > 0 && (_jsx(PreconfiguredReviewerSelector, { itemIds: itemIds, language: language, onReviewerSelected: (reviewer) => {
                            const exists = reviewers.some((r) => r.email.toLowerCase() === reviewer.email.toLowerCase());
                            if (!exists) {
                                setReviewers([...reviewers, reviewer]);
                            }
                        }, existingReviewers: reviewers })), _jsxs("div", { className: "flex flex-col gap-2.5", children: [_jsx("label", { className: "text-neutral-grey-50 text-[11px] font-bold tracking-wider", children: "Add reviewer" }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Input, { "data-testid": "reviewer-email-input", placeholder: "Email address", value: newReviewer.email, onChange: (e) => setNewReviewer({
                                                    ...newReviewer,
                                                    email: e.target.value,
                                                }), onKeyDown: (e) => {
                                                    if (e.key === "Enter") {
                                                        e.preventDefault();
                                                        addReviewer();
                                                    }
                                                }, className: newReviewer.email && !isValidEmail(newReviewer.email)
                                                    ? "border-destructive/30 focus:border-destructive"
                                                    : "" }), newReviewer.email && !isValidEmail(newReviewer.email) && (_jsx("span", { className: "text-destructive text-[10px] font-medium", children: "Invalid email address" })), newReviewer.email && emailAlreadyExists(newReviewer.email) && (_jsx("span", { className: "text-destructive text-[10px] font-medium", children: "Reviewer already added" }))] }), _jsx(Input, { "data-testid": "reviewer-name-input", placeholder: "Full Name", value: newReviewer.name, onChange: (e) => setNewReviewer({
                                            ...newReviewer,
                                            name: e.target.value,
                                        }), onKeyDown: (e) => {
                                            if (e.key === "Enter") {
                                                e.preventDefault();
                                                addReviewer();
                                            }
                                        } }), _jsxs(Button, { onClick: addReviewer, size: "sm", "aria-label": "Add Reviewer", "data-testid": "add-reviewer-button", className: "h-8 self-end px-3", children: [_jsx(Plus, { strokeWidth: 1, className: "mr-1.5 h-3.5 w-3.5" }), "Add reviewer"] })] })] })] }), _jsxs("div", { className: "border-border-default flex flex-col gap-3 md:border-l md:pl-6", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { className: "text-neutral-grey-50 text-[11px] font-bold tracking-wider", children: "Selected reviewers" }), _jsx(CountBadge, { children: reviewers.length })] }), reviewers.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-xs", children: "No reviewers added yet. Add at least one reviewer to continue." })) : (_jsx("div", { className: "flex flex-wrap content-start gap-2.5", children: reviewers.map((reviewer, index) => (_jsxs("div", { className: "group hover:border-primary/30 border-border-default flex items-center gap-2.5 rounded-full border bg-white py-1.5 pr-2 pl-2 transition-all", children: [_jsx("div", { className: "bg-primary/10 text-primary ring-primary/5 flex h-6 w-6 items-center justify-center rounded-full text-[10px] font-bold ring-2", children: reviewer.name.charAt(0).toUpperCase() }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-neutral-grey-100 text-xs leading-none font-medium", children: reviewer.name }), _jsx("span", { className: "text-muted-foreground mt-1 text-[10px] leading-none", children: reviewer.email })] }), _jsx(Button, { variant: "ghost", size: "sm", className: "text-muted-foreground hover:bg-destructive/10 hover:text-destructive h-6 w-6 rounded-full p-0 opacity-50 transition-all hover:opacity-100", onClick: () => removeReviewer(index), children: _jsx(X, { strokeWidth: 1, className: "h-3.5 w-3.5" }) })] }, index))) }))] })] }));
}
//# sourceMappingURL=CreateReviewReviewersStep.js.map