"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FleetForm = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@chakra-ui/react");
const fi_1 = require("react-icons/fi");
const react_hook_form_1 = require("react-hook-form");
const client_1 = require("@apollo/client");
const queries_js_1 = require("../../graphql/queries.js");
const FleetForm = ({ fleet, onSubmit }) => {
    const toast = (0, react_1.useToast)();
    const { register, handleSubmit, control, formState: { errors, isSubmitting }, watch, } = (0, react_hook_form_1.useForm)({
        defaultValues: fleet || {
            name: '',
            description: '',
            agents: [],
            metadata: {},
        },
    });
    const { data: agentData, loading: agentLoading } = (0, client_1.useQuery)(queries_js_1.GET_AVAILABLE_AGENTS);
    const selectedAgents = watch('agents') || [];
    const onFormSubmit = async (data) => {
        try {
            await onSubmit(data);
        }
        catch (error) {
            toast({
                title: 'Error submitting form',
                description: error.message,
                status: 'error',
                duration: 5000,
            });
        }
    };
    return ((0, jsx_runtime_1.jsx)("form", { onSubmit: handleSubmit(onFormSubmit), children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_1.FormControl, { isRequired: true, isInvalid: !!errors.name, children: [(0, jsx_runtime_1.jsx)(react_1.FormLabel, { children: "Fleet Name" }), (0, jsx_runtime_1.jsx)(react_1.Input, { ...register('name', {
                                required: 'Fleet name is required',
                                minLength: {
                                    value: 3,
                                    message: 'Fleet name must be at least 3 characters',
                                },
                            }), placeholder: "Enter fleet name" }), errors.name && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: "red.500", fontSize: "sm", children: errors.name.message }))] }), (0, jsx_runtime_1.jsxs)(react_1.FormControl, { children: [(0, jsx_runtime_1.jsx)(react_1.FormLabel, { children: "Description" }), (0, jsx_runtime_1.jsx)(react_1.Textarea, { ...register('description'), placeholder: "Enter fleet description", rows: 3 })] }), (0, jsx_runtime_1.jsxs)(react_1.FormControl, { isRequired: true, children: [(0, jsx_runtime_1.jsx)(react_1.FormLabel, { children: "Agents" }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: "agents", control: control, rules: { required: 'At least one agent is required' }, render: ({ field }) => ((0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 2, align: "stretch", children: [selectedAgents.map((agentId, index) => {
                                        const agent = agentData?.agents.find((a) => a.id === agentId);
                                        return ((0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsxs)(react_1.Select, { value: agentId, onChange: (e) => {
                                                        const newAgents = [...selectedAgents];
                                                        newAgents[index] = e.target.value;
                                                        field.onChange(newAgents);
                                                    }, children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "Select an agent" }), agentData?.agents.map((agent) => ((0, jsx_runtime_1.jsxs)("option", { value: agent.id, children: [agent.name, " (", agent.type, ")"] }, agent.id)))] }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Remove agent", icon: (0, jsx_runtime_1.jsx)(fi_1.FiX, {}), size: "sm", onClick: () => {
                                                        const newAgents = selectedAgents.filter((_, i) => i !== index);
                                                        field.onChange(newAgents);
                                                    } })] }, agentId));
                                    }), (0, jsx_runtime_1.jsx)(react_1.Button, { leftIcon: (0, jsx_runtime_1.jsx)(fi_1.FiPlus, {}), variant: "outline", size: "sm", onClick: () => field.onChange([...selectedAgents, '']), children: "Add Agent" })] })) }), errors.agents && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: "red.500", fontSize: "sm", children: errors.agents.message }))] }), (0, jsx_runtime_1.jsxs)(react_1.FormControl, { children: [(0, jsx_runtime_1.jsx)(react_1.FormLabel, { children: "Metadata" }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: "metadata", control: control, render: ({ field }) => ((0, jsx_runtime_1.jsx)(react_1.Textarea, { value: JSON.stringify(field.value || {}, null, 2), onChange: (e) => {
                                    try {
                                        field.onChange(JSON.parse(e.target.value));
                                    }
                                    catch (error) {
                                        // Invalid JSON, keep the raw value for now
                                    }
                                }, placeholder: "Enter metadata as JSON", rows: 4, fontFamily: "monospace" })) })] }), (0, jsx_runtime_1.jsx)(react_1.Box, { pt: 4, children: (0, jsx_runtime_1.jsx)(react_1.Button, { type: "submit", colorScheme: "blue", isLoading: isSubmitting, loadingText: "Submitting", width: "full", children: fleet ? 'Update Fleet' : 'Create Fleet' }) })] }) }));
};
exports.FleetForm = FleetForm;
exports.default = exports.FleetForm;
//# sourceMappingURL=FleetForm.js.map