import React from 'react';

import {
    ArrowLeftToLine,
    ArrowRightToLine,
    ArrowsExpandHorizontal,
    ChevronsRight,
    PencilToLine,
} from '@gravity-ui/icons';
import type {DropdownMenuItem} from '@gravity-ui/uikit';
import {ActionTooltip, Button, DropdownMenu, Icon} from '@gravity-ui/uikit';

import {useClusterWithProxy} from '../../../../../store/reducers/cluster/cluster';
import {partitionsApi} from '../../../../../store/reducers/partitions/partitions';
import {cn} from '../../../../../utils/cn';
import createToast from '../../../../../utils/createToast';
import {prepareCommonErrorMessage} from '../../../../../utils/errors';
import {useTypedSelector} from '../../../../../utils/hooks';
import {useCurrentSchema} from '../../../TenantContext';
import i18n from '../i18n';
import {showMoveOffsetConfirmation} from '../utils/showMoveOffsetConfirmation';
import {showSpecifyOffsetConfirmation} from '../utils/showSpecifyOffsetConfirmation';

const b = cn('ydb-diagnostics-partitions-columns');

interface CommittedOffsetCellProps {
    value?: string;
    startOffset: string;
    endOffset: string;
    partitionId: string | number;
}

export function CommittedOffsetCell({
    value,
    startOffset,
    endOffset,
    partitionId,
}: CommittedOffsetCellProps) {
    const {path, database, databaseFullPath} = useCurrentSchema();
    const useMetaProxy = useClusterWithProxy();
    const {selectedConsumer} = useTypedSelector((state) => state.partitions);
    const [commitOffset] = partitionsApi.useCommitOffsetMutation();

    const handleCommitOffset = React.useCallback(
        (offset: number) => {
            if (!selectedConsumer) {
                return;
            }
            commitOffset({
                database,
                path: {path, databaseFullPath, useMetaProxy},
                consumer: selectedConsumer,
                partitionId: Number(partitionId),
                offset,
            })
                .unwrap()
                .then(() => {
                    createToast({
                        name: 'commitOffset',
                        content: i18n('alert_offset-moved'),
                        theme: 'success',
                        title: '',
                    });
                })
                .catch((err: unknown) => {
                    createToast({
                        name: `commitOffset-${offset}-${partitionId}`,
                        title: i18n('alert_offset-error'),
                        content: prepareCommonErrorMessage(err),
                        theme: 'danger',
                    });
                });
        },
        [
            commitOffset,
            database,
            path,
            databaseFullPath,
            useMetaProxy,
            selectedConsumer,
            partitionId,
        ],
    );

    const committedOffsetMenuItems: DropdownMenuItem[][] = React.useMemo(() => {
        const isStartOffsetInteger = Number.isInteger(Number(startOffset));
        const isEndOffsetInteger = Number.isInteger(Number(endOffset));
        const isCommitedOffsetInteger = Number.isInteger(Number(value));

        return [
            [
                {
                    action: () => {
                        if (selectedConsumer && isStartOffsetInteger) {
                            showMoveOffsetConfirmation({
                                confirmMessage: i18n('confirm_move-offset-to-start', {
                                    partitionId: String(partitionId),
                                    consumer: selectedConsumer,
                                }),
                                alertMessage: i18n('alert_move-offset-to-start'),
                                onConfirm: () => {
                                    handleCommitOffset(Number(startOffset));
                                },
                            });
                        }
                    },
                    text: i18n('action_to-start'),
                    iconStart: <Icon data={ArrowLeftToLine} size={14} />,
                    disabled: !isStartOffsetInteger,
                },
                {
                    action: () => {
                        if (selectedConsumer && isEndOffsetInteger) {
                            showMoveOffsetConfirmation({
                                confirmMessage: i18n('confirm_move-offset-to-end', {
                                    partitionId: String(partitionId),
                                    consumer: selectedConsumer,
                                }),
                                alertMessage: i18n('alert_move-offset-forward'),
                                onConfirm: () => {
                                    handleCommitOffset(Number(endOffset));
                                },
                            });
                        }
                    },
                    text: i18n('action_to-end'),
                    iconStart: <Icon data={ArrowRightToLine} size={14} />,
                    disabled: !isEndOffsetInteger,
                },
            ],
            [
                {
                    action: () => {
                        if (selectedConsumer && isCommitedOffsetInteger) {
                            showMoveOffsetConfirmation({
                                confirmMessage: i18n('confirm_skip-message', {
                                    partitionId: String(partitionId),
                                    consumer: selectedConsumer,
                                }),
                                alertMessage: i18n('alert_move-offset-forward'),
                                onConfirm: () => {
                                    handleCommitOffset(Number(value) + 1);
                                },
                            });
                        }
                    },
                    text: i18n('action_skip-message'),
                    iconStart: <Icon data={ChevronsRight} size={14} />,
                    disabled: !isCommitedOffsetInteger,
                },
            ],
            [
                {
                    action: () => {
                        if (selectedConsumer) {
                            showSpecifyOffsetConfirmation({
                                database,
                                path: {path, databaseFullPath, useMetaProxy},
                                consumer: selectedConsumer,
                                partitionId: Number(partitionId),
                            });
                        }
                    },
                    text: i18n('action_specify-offset'),
                    iconStart: <Icon data={PencilToLine} size={14} />,
                },
            ],
        ];
    }, [
        handleCommitOffset,
        selectedConsumer,
        partitionId,
        startOffset,
        endOffset,
        value,
        database,
        path,
        databaseFullPath,
        useMetaProxy,
    ]);

    const [isMenuOpen, setIsMenuOpen] = React.useState(false);

    const handleOpenToggle = React.useCallback((open: boolean) => {
        setIsMenuOpen(open);
    }, []);

    const renderSwitcher = React.useCallback(
        (props: React.ComponentPropsWithoutRef<typeof Button>) => (
            <ActionTooltip title={i18n('context_move-offset')} placement={['right']}>
                <Button
                    {...props}
                    view="flat-secondary"
                    className={b('committed-offset-switcher', {open: isMenuOpen})}
                >
                    <Icon data={ArrowsExpandHorizontal} />
                </Button>
            </ActionTooltip>
        ),
        [isMenuOpen],
    );

    return (
        <div className={b('committed-offset-cell')}>
            <span>{value}</span>

            <DropdownMenu
                items={committedOffsetMenuItems}
                renderSwitcher={renderSwitcher}
                onOpenToggle={handleOpenToggle}
                popupProps={{placement: 'bottom-end'}}
                menuProps={{size: 's'}}
            />
        </div>
    );
}