'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function RequestBuilder({ request, params, headers, body, variables, onParamsChange, onHeadersChange, onBodyChange, onVariablesChange }) {
    return /*#__PURE__*/ _jsxs("div", {
        className: "p-6 space-y-6",
        children: [
            /*#__PURE__*/ _jsxs("div", {
                children: [
                    /*#__PURE__*/ _jsx("label", {
                        className: "block text-sm font-medium mb-2",
                        children: "Endpoint"
                    }),
                    /*#__PURE__*/ _jsx("input", {
                        type: "text",
                        value: request.endpoint,
                        disabled: true,
                        className: "w-full px-3 py-2 border rounded bg-muted text-sm font-mono"
                    })
                ]
            }),
            variables.length > 0 && /*#__PURE__*/ _jsxs("div", {
                children: [
                    /*#__PURE__*/ _jsx("h3", {
                        className: "text-sm font-semibold mb-2",
                        children: "Path Variables"
                    }),
                    /*#__PURE__*/ _jsx("div", {
                        className: "space-y-2",
                        children: variables.map((variable, index)=>/*#__PURE__*/ _jsxs("div", {
                                className: "flex gap-2",
                                children: [
                                    /*#__PURE__*/ _jsx("input", {
                                        type: "text",
                                        value: variable.key,
                                        disabled: true,
                                        className: "flex-1 px-3 py-2 border rounded bg-muted text-sm font-mono"
                                    }),
                                    /*#__PURE__*/ _jsx("input", {
                                        type: "text",
                                        value: variable.value,
                                        onChange: (e)=>{
                                            const newVars = [
                                                ...variables
                                            ];
                                            newVars[index].value = e.target.value;
                                            onVariablesChange(newVars);
                                        },
                                        placeholder: "value",
                                        className: "flex-1 px-3 py-2 border rounded text-sm"
                                    })
                                ]
                            }, index))
                    })
                ]
            }),
            params.length > 0 && /*#__PURE__*/ _jsxs("div", {
                children: [
                    /*#__PURE__*/ _jsx("h3", {
                        className: "text-sm font-semibold mb-2",
                        children: "Query Parameters"
                    }),
                    /*#__PURE__*/ _jsx("div", {
                        className: "space-y-2",
                        children: params.map((param, index)=>/*#__PURE__*/ _jsxs("div", {
                                className: "flex gap-2 items-center",
                                children: [
                                    /*#__PURE__*/ _jsx("input", {
                                        type: "checkbox",
                                        checked: param.active,
                                        onChange: (e)=>{
                                            const newParams = [
                                                ...params
                                            ];
                                            newParams[index].active = e.target.checked;
                                            onParamsChange(newParams);
                                        },
                                        className: "w-4 h-4"
                                    }),
                                    /*#__PURE__*/ _jsx("input", {
                                        type: "text",
                                        value: param.key,
                                        disabled: true,
                                        className: "flex-1 px-3 py-2 border rounded bg-muted text-sm font-mono"
                                    }),
                                    /*#__PURE__*/ _jsx("input", {
                                        type: "text",
                                        value: param.value,
                                        onChange: (e)=>{
                                            const newParams = [
                                                ...params
                                            ];
                                            newParams[index].value = e.target.value;
                                            onParamsChange(newParams);
                                        },
                                        placeholder: "value",
                                        className: "flex-1 px-3 py-2 border rounded text-sm"
                                    })
                                ]
                            }, index))
                    })
                ]
            }),
            headers.length > 0 && /*#__PURE__*/ _jsxs("div", {
                children: [
                    /*#__PURE__*/ _jsx("h3", {
                        className: "text-sm font-semibold mb-2",
                        children: "Headers"
                    }),
                    /*#__PURE__*/ _jsx("div", {
                        className: "space-y-2",
                        children: headers.map((header, index)=>/*#__PURE__*/ _jsxs("div", {
                                className: "flex gap-2 items-center",
                                children: [
                                    /*#__PURE__*/ _jsx("input", {
                                        type: "checkbox",
                                        checked: header.active,
                                        onChange: (e)=>{
                                            const newHeaders = [
                                                ...headers
                                            ];
                                            newHeaders[index].active = e.target.checked;
                                            onHeadersChange(newHeaders);
                                        },
                                        className: "w-4 h-4"
                                    }),
                                    /*#__PURE__*/ _jsx("input", {
                                        type: "text",
                                        value: header.key,
                                        disabled: true,
                                        className: "flex-1 px-3 py-2 border rounded bg-muted text-sm font-mono"
                                    }),
                                    /*#__PURE__*/ _jsx("input", {
                                        type: "text",
                                        value: header.value,
                                        onChange: (e)=>{
                                            const newHeaders = [
                                                ...headers
                                            ];
                                            newHeaders[index].value = e.target.value;
                                            onHeadersChange(newHeaders);
                                        },
                                        placeholder: "value",
                                        className: "flex-1 px-3 py-2 border rounded text-sm"
                                    })
                                ]
                            }, index))
                    })
                ]
            }),
            request.body.body !== null && request.body.contentType && /*#__PURE__*/ _jsxs("div", {
                children: [
                    /*#__PURE__*/ _jsx("h3", {
                        className: "text-sm font-semibold mb-2",
                        children: "Request Body"
                    }),
                    /*#__PURE__*/ _jsx("div", {
                        className: "mb-2",
                        children: /*#__PURE__*/ _jsxs("span", {
                            className: "text-xs text-muted-foreground",
                            children: [
                                "Content-Type: ",
                                request.body.contentType
                            ]
                        })
                    }),
                    request.body.contentType === 'application/x-www-form-urlencoded' ? /*#__PURE__*/ _jsx("textarea", {
                        value: body || '',
                        onChange: (e)=>onBodyChange(e.target.value),
                        className: "w-full h-64 px-3 py-2 border rounded font-mono text-sm",
                        placeholder: "key1: value1 key2: value2"
                    }) : /*#__PURE__*/ _jsx("textarea", {
                        value: body || '',
                        onChange: (e)=>onBodyChange(e.target.value),
                        className: "w-full h-64 px-3 py-2 border rounded font-mono text-sm",
                        placeholder: "Enter request body..."
                    })
                ]
            })
        ]
    });
}
