import {
    useMemo,
    type FC
} from "react";
import {
    Pressable,
    View
} from "react-native";
import type ISystemToolbarProps from "./type";
import {
    type ISystemToolbarAction
} from "./type";
import stylesheet, {
    useStyles
} from "./stylesheet";
import {
    NCoreUIKitLocalize,
    NCoreUIKitTheme
} from "../../core/hooks";
import Tooltip from "../tooltip";
import Button from "../button";
import Text from "../text";

const ActionItem: FC<{ action: ISystemToolbarAction }> = ({
    action
}) => {
    const {
        localize
    } = NCoreUIKitLocalize.useContext();

    const {
        borders,
        colors,
        spaces
    } = NCoreUIKitTheme.useContext();

    const {
        tooltipContainer: tooltipContainerDynamicStyle,
        childCaret: childCaretDynamicStyle,
        actionItem: actionItemDynamicStyle
    } = useStyles({
        borders,
        colors,
        spaces
    });

    const pressableStyle = useMemo(() => {
        return [
            stylesheet.systemToolbarAction,
            actionItemDynamicStyle,
            action.style
        ];
    }, [
        actionItemDynamicStyle,
        action.style
    ]);

    const titleText = action.titleKey ? localize(action.titleKey) : undefined;
    const ActionIcon = action.icon;

    const btn = <Pressable
        onPress={action.onPress}
        style={pressableStyle}
    >
        {
            ActionIcon ?
                <ActionIcon
                    color="mid"
                    size={16}
                />
            :
                null
        }
        {
            titleText ?
                <Text
                    variant="labelMediumSize"
                    style={action.titleProps}
                >
                    {titleText}
                </Text>
            :
                null
        }
    </Pressable>;

    if (!action.content || action.content.length === 0) {
        return btn;
    }

    return <Tooltip
        content={<View
            style={stylesheet.systemToolbarContent}
        >
            {action.content.map((childAction, index) => <ActionItem
                key={`system-toolbar-child-action-${index}`}
                action={childAction}
            />)}
        </View>}
        containerStyle={tooltipContainerDynamicStyle}
        caretStyle={childCaretDynamicStyle}
        location={{
            horizontal: "right",
            vertical: "center"
        }}
        triggerMode="hover"
        sizing="content"
    >
        {btn}
    </Tooltip>;
};

const SystemToolbar: FC<ISystemToolbarProps> = ({
    variant = "filled",
    type = "neutral",
    size = "medium",
    titleKey,
    actions,
    style,
    title,
    icon
}) => {
    const {
        localize
    } = NCoreUIKitLocalize.useContext();

    const {
        borders,
        colors,
        spaces
    } = NCoreUIKitTheme.useContext();

    const {
        tooltipContainer: tooltipContainerDynamicStyle,
        triggerBtn: triggerBtnDynamicStyle,
        rootCaret: rootCaretDynamicStyle
    } = useStyles({
        borders,
        colors,
        spaces
    });

    const mainTitle = titleKey ? localize(titleKey) : title;

    const triggerBtn = <Button
        onPress={() => {
            // Dropdown triggers typically don't have a main action unless specified.
            // Wait, we don't have onPress on the root SystemToolbar based on user request.
        }}
        customColor={colors.content.container.default}
        style={[
            style,
            triggerBtnDynamicStyle
        ]}
        isCustomPadding={true}
        variant={variant}
        title={mainTitle}
        size={size}
        type={type}
        icon={icon}
    />;

    if (!actions || actions.length === 0) {
        return triggerBtn;
    }

    return <Tooltip
        content={<View
            style={stylesheet.systemToolbarContent}
        >
            {actions.map((action, index) => <ActionItem
                key={`system-toolbar-action-${index}`}
                action={action}
            />)}
        </View>}
        containerStyle={tooltipContainerDynamicStyle}
        caretStyle={rootCaretDynamicStyle}
        location={{
            horizontal: "center",
            vertical: "bottom"
        }}
        triggerMode="hover"
        sizing="content"
    >
        {triggerBtn}
    </Tooltip>;
};
export default SystemToolbar;
