import React from 'react';

import {Copy, Ellipsis, FloppyDisk, FontCursor, Xmark} from '@gravity-ui/icons';
import type {DropdownMenuItem, DropdownMenuItemAction} from '@gravity-ui/uikit';
import {ActionTooltip, DropdownMenu, Flex, Hotkey, Icon, Tab, Text} from '@gravity-ui/uikit';

import type {QueryTabState} from '../../../../../store/reducers/query/types';
import {cn} from '../../../../../utils/cn';
import i18n from '../../i18n';
import {isQueryCancelledError} from '../../utils/isQueryCancelledError';
import {HOTKEY_LABELS} from '../constants';

import type {TabExecutionStatus} from './TabExecutionStatusIndicator';
import {TabExecutionStatusIndicator} from './TabExecutionStatusIndicator';

import './EditorTabItem.scss';

const b = cn('ydb-editor-tab-item');

function getTabExecutionStatus(tab: QueryTabState): TabExecutionStatus | undefined {
    const result = tab.result;
    if (!result) {
        return undefined;
    }

    if (result.isLoading) {
        return 'in_progress';
    }

    if (result.error) {
        return isQueryCancelledError(result.error) ? 'stopped' : 'failed';
    }

    return 'done';
}

export interface EditorTabItemProps {
    tabId: string;
    tab: QueryTabState;
    isActive: boolean;
    onActivate: (tabId: string) => void;
    onCloseTab: (tabId: string) => void;
    onDuplicateTab: (tabId: string) => void;
    onRenameTab: (tabId: string, currentTitle: string) => void;
    onSaveQueryAs: (tabId: string) => void;
    onCloseOtherTabs: (tabId: string) => void;
    onCloseAllTabs: () => void;
}

export function EditorTabItem({
    tabId,
    tab,
    isActive,
    onActivate,
    onCloseTab,
    onDuplicateTab,
    onRenameTab,
    onSaveQueryAs,
    onCloseOtherTabs,
    onCloseAllTabs,
}: EditorTabItemProps) {
    const title = tab.title || i18n('title_new-query');
    const isDirty = Boolean(tab.isDirty);
    const executionStatus = getTabExecutionStatus(tab);
    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
    const [isMenuClosing, setIsMenuClosing] = React.useState(false);
    const tabRef = React.useRef<HTMLButtonElement>(null);

    React.useEffect(() => {
        if (isActive && tabRef.current) {
            tabRef.current.scrollIntoView({block: 'nearest', inline: 'nearest'});
        }
    }, [isActive, executionStatus]);

    const handleMenuSwitcherClick = React.useCallback((event: React.MouseEvent<HTMLElement>) => {
        event.stopPropagation();
    }, []);

    const handleMenuOpenToggle = React.useCallback((open: boolean) => {
        if (open) {
            setIsMenuOpen(true);
            setIsMenuClosing(false);
        } else {
            setIsMenuOpen(false);
            setIsMenuClosing(true);
        }
    }, []);

    const handleMenuTransitionOutComplete = React.useCallback(() => {
        setIsMenuClosing(false);
    }, []);

    const handleCloseClick = React.useCallback(
        (event: React.MouseEvent<HTMLElement>) => {
            event.stopPropagation();
            onCloseTab(tabId);
        },
        [onCloseTab, tabId],
    );

    const createMenuAction = React.useCallback(
        (action: () => void): DropdownMenuItemAction<unknown> => {
            return (event) => {
                event.stopPropagation();
                action();
            };
        },
        [],
    );

    const handleRenameClick = React.useCallback(() => {
        onActivate(tabId);
        onRenameTab(tabId, title);
    }, [onActivate, onRenameTab, tabId, title]);

    const handleDuplicateClick = React.useCallback(() => {
        onDuplicateTab(tabId);
    }, [onDuplicateTab, tabId]);

    const handleSaveQueryAsClick = React.useCallback(() => {
        onActivate(tabId);
        onSaveQueryAs(tabId);
    }, [onActivate, onSaveQueryAs, tabId]);

    const handleCloseOtherTabsClick = React.useCallback(() => {
        onActivate(tabId);
        onCloseOtherTabs(tabId);
    }, [onActivate, onCloseOtherTabs, tabId]);

    const handleCloseAllTabsClick = React.useCallback(() => {
        onCloseAllTabs();
    }, [onCloseAllTabs]);

    const tabMenuItems = React.useMemo<DropdownMenuItem[][]>(() => {
        return [
            [
                {
                    text: i18n('action_rename-query'),
                    iconStart: <FontCursor />,
                    iconEnd: <Hotkey value={HOTKEY_LABELS.renameTab} />,
                    action: createMenuAction(handleRenameClick),
                },
                {
                    text: i18n('action_duplicate-query-tab'),
                    iconStart: <Copy />,
                    action: createMenuAction(handleDuplicateClick),
                },
            ],
            [
                {
                    text: i18n('action_save-query-as'),
                    iconStart: <FloppyDisk />,
                    iconEnd: <Hotkey value={HOTKEY_LABELS.saveQueryAs} />,
                    action: createMenuAction(handleSaveQueryAsClick),
                },
            ],
            [
                {
                    text: i18n('action_close-query-tab'),
                    iconStart: <Xmark />,
                    iconEnd: <Hotkey value={HOTKEY_LABELS.closeTab} />,
                    action: createMenuAction(() => onCloseTab(tabId)),
                },
                {
                    text: i18n('action_close-other-query-tabs'),
                    iconStart: <Xmark />,
                    iconEnd: <Hotkey value={HOTKEY_LABELS.closeOtherTabs} />,
                    action: createMenuAction(handleCloseOtherTabsClick),
                },
                {
                    text: i18n('action_close-all-query-tabs'),
                    iconStart: <Xmark />,
                    iconEnd: <Hotkey value={HOTKEY_LABELS.closeAllTabs} />,
                    action: createMenuAction(handleCloseAllTabsClick),
                },
            ],
        ];
    }, [
        createMenuAction,
        handleCloseAllTabsClick,
        handleCloseOtherTabsClick,
        handleDuplicateClick,
        handleRenameClick,
        handleSaveQueryAsClick,
        onCloseTab,
        tabId,
    ]);

    const renderTabMenuSwitcher = React.useCallback((props: React.HTMLAttributes<HTMLElement>) => {
        return (
            <span {...props} className={b('tab-action', {menu: true})}>
                <Icon data={Ellipsis} size={12} />
            </span>
        );
    }, []);

    return (
        <Tab
            ref={tabRef}
            value={tabId}
            qa={`query-editor-tab-${tabId}`}
            className={b('tab-root', {menuOpen: isMenuOpen || isMenuClosing})}
        >
            <Flex className={b('tab')} alignItems="center" gap={1}>
                <TabExecutionStatusIndicator status={executionStatus} />
                <Text variant="caption-2" className={b('tab-title', {dirty: isDirty})}>
                    {title}
                </Text>
                <Flex className={b('tab-additional', {dirty: isDirty})} alignItems="center" gap={0}>
                    {isDirty ? <div className={b('tab-dirty', {active: isActive})} /> : null}
                    <span className={b('tab-action', {active: isActive})}>
                        <DropdownMenu
                            items={tabMenuItems}
                            open={isMenuOpen}
                            onOpenToggle={handleMenuOpenToggle}
                            onSwitcherClick={handleMenuSwitcherClick}
                            renderSwitcher={renderTabMenuSwitcher}
                            switcherWrapperClassName={b('tab-menu-switcher')}
                            popupProps={{
                                placement: ['bottom-start', 'top-start'],
                                floatingStyles: {width: 264},
                                onTransitionOutComplete: handleMenuTransitionOutComplete,
                            }}
                            size="s"
                            menuProps={{size: 'l'}}
                        />
                    </span>
                    <ActionTooltip
                        title={i18n('action_close-query-tab')}
                        placement={['top-start', 'top-end', 'bottom-start', 'bottom-end']}
                        hotkey={HOTKEY_LABELS.closeTab}
                    >
                        <span
                            className={b('tab-action', {close: true, active: isActive})}
                            onClick={handleCloseClick}
                        >
                            <Icon data={Xmark} size={12} />
                        </span>
                    </ActionTooltip>
                </Flex>
            </Flex>
        </Tab>
    );
}