import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Box, Text } from "@chakra-ui/layout";
import { Menu, MenuButton, MenuItem, MenuList, Button, Portal, } from "@chakra-ui/react";
import { ChevronDown } from "@feedloop/icon";
import React from "react";
import { useSourceHooks } from "../hooks/sourceHooks/useSourceHooks";
import { registerComponent } from "../interfaces";
const DropdownNestedRelation = registerComponent("Dropdown Nested Relation", {
    type: "nested-list",
    icon: "SelectInput",
    group: "input",
    display: "inline",
    hidden: true,
    defaultProps: {
        label: "Dropdown Nested Relation",
        placeholder: "Placeholder here",
        hidden: false,
        data: {
            inputID: "Input",
            field: { type: "relation", options: {} },
            validation: {
                required: false,
            },
        },
    },
    propDefinition: {
        label: { group: "Design", type: "expression", options: {} },
        placeholder: {
            group: "Design",
            type: "expression",
            options: {},
        },
        hidden: {
            group: "Design",
            type: "boolean",
            options: { format: "boolean" },
        },
        data: {
            group: "Design",
            type: "state",
            options: {
                inputID: "Input",
                field: { type: "relation", options: {} },
            },
        },
    },
    Component: (props) => {
        var _a, _b, _c;
        const boxWidth = React.useRef(null);
        const rowId = props.hooks.useTemplate(`${props.source.rowId}`);
        const source = React.useMemo(() => (Object.assign(Object.assign({}, props.source), { rowId, params: {
                condition: {
                    $and: [
                        {
                            id: { $eq: rowId },
                        },
                    ],
                },
                populate: [props.source.fieldId],
            } })), [props.source, rowId, props.source.fieldId]);
        const sourceHooks = useSourceHooks(source);
        const result = sourceHooks.useFetchList();
        const items = (_b = (_a = result.data) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b[props.source.fieldId];
        const title = props.hooks.useEvaluate(props.properties.label);
        const placeholder = props.hooks.useEvaluate(props.properties.placeholder);
        const data = props.hooks.useRuntimeInput(props.properties.data, props.data.page.row, {
            validate: (value) => {
                if (typeof value === "undefined") {
                    return { error: "" };
                }
                else if (!value) {
                    return { error: "Required field, Please enter the data" };
                }
            },
        });
        return (_jsxs(Box, Object.assign({ display: props.properties.hidden ? "none" : undefined }, { children: [_jsx(Text, Object.assign({ fontSize: "lg", pb: 2 }, { children: title })), _jsxs(Menu, { children: [_jsx(MenuButton, Object.assign({ as: Button, bgColor: "#fff", width: "100%", ref: boxWidth, textAlign: "left", variant: "outline", borderRadius: "md", fontWeight: "normal", _focus: { shadow: "0px" }, rightIcon: _jsx(ChevronDown, {}), "data-test": "dropdown-nested-menu-button" }, { children: data.value ? data.value : placeholder })), _jsx(Portal, { children: _jsxs(MenuList, Object.assign({ border: "0px", width: (_c = boxWidth === null || boxWidth === void 0 ? void 0 : boxWidth.current) === null || _c === void 0 ? void 0 : _c.offsetWidth }, { children: [_jsx(Text, Object.assign({ color: "gray", py: 2, px: 4, style: { cursor: "default" } }, { children: placeholder })), (items || []).map((item) => (_jsx(MenuItem, Object.assign({ backgroundColor: data.value === item.id && "gray.100", onClick: () => data.onChange(item.id), "data-test": "dropdown-nested-item-" + item.id }, { children: item.id }), item.id)))] })) })] })] })));
    },
});
export default DropdownNestedRelation;
//# sourceMappingURL=buildDropdownNestedRelation.js.map