import { jsx, jsxs } from "react/jsx-runtime";
import { useReactFlow } from "../../xyflow/react.js";
import { Button } from "@uipath/apollo-wind";
import { memo, useCallback, useEffect, useState } from "react";
import { CanvasIcon } from "../../utils/icon-registry.js";
import { FloatingCanvasPanel } from "../FloatingCanvasPanel/index.js";
import { CheckboxField, NumberField, SelectField, TextField } from "./fields/index.js";
import { useNodeConfiguration, useNodeSelection } from "./hooks/index.js";
const PINNED_PANEL_WIDTH = 320;
function renderField(field, value, onChange, error) {
    switch(field.type){
        case 'text':
        case 'textarea':
            {
                const textValue = 'string' == typeof value ? value : String(value ?? '');
                return /*#__PURE__*/ jsx(TextField, {
                    field: field,
                    value: textValue,
                    onChange: onChange,
                    error: error
                });
            }
        case 'select':
            {
                const selectValue = value;
                return /*#__PURE__*/ jsx(SelectField, {
                    field: field,
                    value: selectValue,
                    onChange: onChange,
                    error: error
                });
            }
        case 'number':
            {
                const numberValue = 'number' == typeof value ? value : void 0;
                return /*#__PURE__*/ jsx(NumberField, {
                    field: field,
                    value: numberValue,
                    onChange: onChange,
                    error: error
                });
            }
        case 'checkbox':
            {
                const boolValue = 'boolean' == typeof value ? value : !!value;
                return /*#__PURE__*/ jsx(CheckboxField, {
                    field: field,
                    value: boolValue,
                    onChange: onChange,
                    error: error
                });
            }
        default:
            {
                const defaultValue = String(value ?? '');
                return /*#__PURE__*/ jsx(TextField, {
                    field: field,
                    value: defaultValue,
                    onChange: onChange,
                    error: error
                });
            }
    }
}
const NodePropertiesPanel_NodePropertiesPanel = /*#__PURE__*/ memo(function({ nodeId, onClose, position = 'right', customSchemas = {}, enableValidation = false, onChange, maintainSelection = true, defaultPinned = false, onPinnedChange }) {
    const { getInternalNode } = useReactFlow();
    const { setSelectedNodeId, selectedNode } = useNodeSelection(nodeId, maintainSelection);
    const { schema, errors, handleFieldChange } = useNodeConfiguration(selectedNode, customSchemas, enableValidation, onChange);
    const [isPinned, setIsPinned] = useState(defaultPinned);
    const handleClose = useCallback(()=>{
        setSelectedNodeId(null);
        setIsPinned(false);
        if (onClose) onClose();
    }, [
        onClose,
        setSelectedNodeId
    ]);
    const handleTogglePin = useCallback(()=>{
        setIsPinned((prev)=>!prev);
    }, []);
    useEffect(()=>{
        if (onPinnedChange) onPinnedChange(isPinned);
    }, [
        isPinned,
        onPinnedChange
    ]);
    const internalNode = selectedNode ? getInternalNode(selectedNode.id) : null;
    const renderSection = (section)=>{
        if (!selectedNode) return null;
        return /*#__PURE__*/ jsxs("div", {
            className: "px-4 py-4 border-b border-(--canvas-border-de-emp) last:border-b-0",
            children: [
                section.title && /*#__PURE__*/ jsx("div", {
                    className: "font-medium text-[14px] text-(--canvas-foreground) mb-2",
                    children: section.title
                }),
                /*#__PURE__*/ jsx("div", {
                    className: "flex flex-col gap-4",
                    children: section.fields.map((field)=>/*#__PURE__*/ jsx("div", {
                            children: renderField(field, selectedNode.data[field.key], (value)=>handleFieldChange(field.key, value), errors[field.key])
                        }, field.key))
                })
            ]
        }, section.id);
    };
    if (!selectedNode || !schema || !internalNode) return null;
    const headerActions = /*#__PURE__*/ jsx(Button, {
        variant: "ghost",
        size: "icon",
        className: "h-6 w-6",
        onClick: handleTogglePin,
        title: isPinned ? 'Unpin panel' : 'Pin panel',
        children: /*#__PURE__*/ jsx(CanvasIcon, {
            icon: isPinned ? 'shrink' : 'expand',
            size: 16
        })
    });
    return /*#__PURE__*/ jsx(FloatingCanvasPanel, {
        open: !!selectedNode,
        nodeId: isPinned ? void 0 : selectedNode.id,
        anchorRect: isPinned ? {
            x: window.innerWidth - PINNED_PANEL_WIDTH,
            y: 0,
            width: 0,
            height: window.innerHeight
        } : void 0,
        placement: isPinned ? 'left-start' : 'right' === position ? 'right-start' : 'left-start',
        offset: isPinned ? 0 : 20,
        title: 'stage' === selectedNode.type ? 'Stage properties' : `${selectedNode.type || 'Node'} Configuration`,
        headerActions: headerActions,
        onClose: handleClose,
        scrollKey: selectedNode.id,
        isPinned: isPinned,
        children: schema.sections ? schema.sections.map((section)=>renderSection(section)) : /*#__PURE__*/ jsx("div", {
            className: "px-4 py-4",
            children: /*#__PURE__*/ jsx("div", {
                className: "flex flex-col gap-4",
                children: schema.fields?.map((field)=>/*#__PURE__*/ jsx("div", {
                        children: selectedNode && renderField(field, selectedNode.data[field.key], (value)=>handleFieldChange(field.key, value), errors[field.key])
                    }, field.key))
            })
        })
    });
});
export { NodePropertiesPanel_NodePropertiesPanel as NodePropertiesPanel };
