var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { css, cx } from '@emotion/css';
import { Tabs as BaseTabs, TabList, Tab, TabPanels, TabPanel, Text } from '@chakra-ui/react';
import { Type } from '@sinclair/typebox';
import { implementRuntimeComponent } from '@subscan/widget-runtime';
import { PRESET_PROPERTY_CATEGORY, COMPONENTS_CATEGORY, VERSION } from 'config/constants';
import { StyledFont14 } from 'ui/common';
import styled, { useTheme } from 'styled-components';
var StateSpec = Type.Object({
    selectedTabIndex: Type.Number(),
});
var PropsSpec = Type.Object({
    tabNames: Type.Array(Type.String(), {
        title: 'Tab Names',
        category: PRESET_PROPERTY_CATEGORY.Basic,
    }),
    initialSelectedTabIndex: Type.Number({
        title: 'Default Selected Tab Index',
        category: PRESET_PROPERTY_CATEGORY.Basic,
    }),
});
var StyledTabsLine = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 1px;\n  width: 100%;\n  background-color: ", ";\n"], ["\n  height: 1px;\n  width: 100%;\n  background-color: ", ";\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.background04;
});
export default implementRuntimeComponent({
    version: VERSION.Core,
    metadata: {
        name: 'tabs',
        displayName: 'Tabs',
        description: 'chakra-ui tabs',
        exampleProperties: {
            tabNames: ['Tab1', 'Tab2'],
            initialSelectedTabIndex: 0,
        },
        annotations: {
            category: COMPONENTS_CATEGORY.Display,
        },
    },
    spec: {
        properties: PropsSpec,
        state: StateSpec,
        methods: {},
        // tab slot is dynamic
        slots: {
            content: {
                slotProps: Type.Object({
                    tabIndex: Type.Number(),
                }),
            },
        },
        styleSlots: ['tabItem', 'tabContent'],
        events: [],
    },
})(function (props) {
    var tabNames = props.tabNames, mergeState = props.mergeState, initialSelectedTabIndex = props.initialSelectedTabIndex, customStyle = props.customStyle, slotsElements = props.slotsElements, elementRef = props.elementRef;
    var _a = useState(initialSelectedTabIndex !== null && initialSelectedTabIndex !== void 0 ? initialSelectedTabIndex : 0), selectedTabIndex = _a[0], setSelectedTabIndex = _a[1];
    var theme = useTheme();
    useEffect(function () {
        mergeState({ selectedTabIndex: selectedTabIndex });
    }, [mergeState, selectedTabIndex]);
    var CSSTabBorderActive = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    border-bottom: 4px;\n    border-color: ", ";\n    border-style: solid;\n  "], ["\n    border-bottom: 4px;\n    border-color: ", ";\n    border-style: solid;\n  "])), theme.chain.color);
    var CSSTabBorderNormal = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    border-bottom: 4px;\n    border-color: ", ";\n    border-style: solid;\n  "], ["\n    border-bottom: 4px;\n    border-color: ", ";\n    border-style: solid;\n  "])), theme.colors.contrast);
    var placeholder = _jsx(Text, __assign({ color: "gray" }, { children: "Slot content is empty.Please drag component to this slot." }));
    return (_jsxs(BaseTabs, __assign({ defaultIndex: initialSelectedTabIndex, onChange: function (idx) { return setSelectedTabIndex(idx); }, variant: "unstyled" }, { children: [_jsx(TabList, __assign({ ref: elementRef }, { children: tabNames.map(function (name, idx) { return (_jsx(Tab, __assign({ _selected: { bg: theme.colors.contrast }, className: cx(css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                ", "\n              "], ["\n                ", "\n              "])), customStyle === null || customStyle === void 0 ? void 0 : customStyle.tabItem), selectedTabIndex === idx ? CSSTabBorderActive : CSSTabBorderNormal) }, { children: _jsx(StyledFont14, __assign({ style: { color: selectedTabIndex === idx ? theme.chain.color : theme.colors.primary }, bold: true }, { children: name })) }), idx)); }) })), _jsx(StyledTabsLine, {}), _jsx(TabPanels, { children: tabNames.map(function (_, idx) {
                    var _a;
                    return (_jsx(TabPanel, __assign({ className: css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                ", "\n              "], ["\n                ", "\n              "])), customStyle === null || customStyle === void 0 ? void 0 : customStyle.tabContent) }, { children: (_a = slotsElements === null || slotsElements === void 0 ? void 0 : slotsElements.content) === null || _a === void 0 ? void 0 : _a.call(slotsElements, { tabIndex: idx }, placeholder, "content_".concat(idx)) }), idx));
                }) })] })));
});
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
