import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Box, Button, Icon } from "@chakra-ui/react";
import { Plus } from "@feedloop/icon";
import { keys } from "lodash";
import React from "react";
import EditorContext from "../EditorContext";
import TabComponent from "../components/Tab";
import { buildComponent, registerComponent } from "../interfaces";
import { RuntimeContext } from "../RuntimeContext";
import { ComponentPropertyEditorContainer } from "../components/ComponentPropertyEditorContainer";
import { useHumanize } from "../utils/humanizeString";
import { usePageParam } from "../hooks/usePageParam";
const Tab = registerComponent("Tab", {
    type: "none",
    icon: "Flex",
    group: "layout",
    kind: "layout",
    experimental: true,
    defaultProps: {
        layout: "horizontal",
        alignment: "start",
        length: "0",
        style: "line",
        addTab: "",
    },
    propDefinition: {
        layout: {
            group: "Design",
            type: "string",
            options: {
                format: "button",
                options: [
                    { icon: "ThreeColumns", value: "horizontal" },
                    { icon: "ListAlt", value: "vertical" },
                ],
            },
        },
        length: {
            group: "Design",
            type: "string",
            options: {
                format: "select",
                options: [
                    { label: "Fixed", value: "0" },
                    { label: "Stretch", value: "1" },
                ],
            },
        },
        alignment: {
            group: "Design",
            type: "string",
            options: {
                format: "select",
                options: [
                    { label: "Left", value: "start" },
                    { label: "Center", value: "center" },
                    { label: "Right", value: "end" },
                ],
            },
            style: { width: "full-width" },
        },
        style: {
            group: "Design",
            type: "string",
            options: {
                format: "button",
                options: [
                    { icon: "Underline", value: "line" },
                    { icon: "TextAlt3", value: "unstyled" },
                ],
            },
        },
        addTab: {
            group: "Design",
            type: "custom",
            options: {},
            style: { width: "full-width" },
        },
    },
    Editor: {
        alignment: (props) => {
            const propName = React.useMemo(() => { var _a; return (_a = props.propDef.label) !== null && _a !== void 0 ? _a : props.propName; }, [props.propDef.label, props.propName]);
            const humanizedPropName = useHumanize(propName);
            const handleChange = React.useCallback((val) => {
                if (typeof val === "string") {
                    props.onChange(val);
                }
            }, [props.onChange, props.values.alignment]);
            if (props.values && props.values.length !== "0")
                return null;
            return (_jsx(ComponentPropertyEditorContainer, Object.assign({ title: humanizedPropName, description: props.propDef.description }, { children: _jsx(props.PropertyEditor.string, { propDef: props.propDef, propName: props.propName, value: props.value, onChange: props.onChange, onBlur: handleChange, view: props.view, values: props.values }) })));
        },
        addTab: (props) => {
            const pageID = usePageParam();
            const runtimeActions = RuntimeContext.useActions();
            const editorActions = EditorContext.useActions();
            const addComponent = React.useCallback(() => {
                const instance = buildComponent("Menu Tab", {
                    metadata: { idx: keys.length + 1, container: props.instance.id },
                });
                runtimeActions.addComponent(instance, { page: pageID });
                editorActions.setActiveComponent(instance.id);
                editorActions.setEditMode("select");
            }, [props.instance.id, keys.length, pageID]);
            return (_jsx(Box, { children: _jsxs(Button, Object.assign({ size: "sm", variant: "outline", onClick: addComponent }, { children: [_jsx(Icon, { as: Plus, mr: 2 }), "Add menu tab"] })) }));
        },
    },
    Component: (props) => _jsx(TabComponent, Object.assign({}, props)),
});
export default Tab;
//# sourceMappingURL=buildTab.js.map