import React from 'react';

import {ChartTreemap} from '@gravity-ui/icons';
import {Button, Flex, Icon, Select, Text} from '@gravity-ui/uikit';

import {EntitiesCount} from '../../../components/EntitiesCount/EntitiesCount';
import {usePaginatedTableState} from '../../../components/PaginatedTable/PaginatedTableContext';
import {Search} from '../../../components/Search/Search';
import {
    useBlobStorageCapacityMetricsAvailable,
    useBlobStorageCapacityMetricsEnabled,
    useBridgeModeEnabled,
} from '../../../store/reducers/capabilities/hooks';
import {SETTING_KEYS} from '../../../store/reducers/settings/constants';
import {useSetting} from '../../../utils/hooks';
import {useIsUserAllowedToMakeChanges} from '../../../utils/hooks/useIsUserAllowedToMakeChanges';
import {
    STORAGE_GROUPS_COLUMNS_IDS,
    getStorageGroupsGroupByOptions,
} from '../PaginatedStorageGroupsTable/columns/constants';
import type {StorageGroupsColumn} from '../PaginatedStorageGroupsTable/columns/types';
import {StorageGroupsExpertModePanel} from '../StorageExpertModePanel/StorageGroupsExpertModePanel';
import {StorageTypeFilter} from '../StorageTypeFilter/StorageTypeFilter';
import {StorageVisibleEntitiesFilter} from '../StorageVisibleEntitiesFilter/StorageVisibleEntitiesFilter';
import i18n from '../i18n';
import {b} from '../shared';
import {useIsStorageExpertMode, useStorageQueryParams} from '../useStorageQueryParams';

interface StorageControlsProps {
    withTypeSelector?: boolean;
    withGroupBySelect?: boolean;

    columns?: StorageGroupsColumn[];

    entitiesCountCurrent: number;
    entitiesCountTotal?: number;
    entitiesLoading: boolean;
}

export function StorageGroupsControls({
    withTypeSelector,
    withGroupBySelect,

    columns = [],

    entitiesCountCurrent,
    entitiesCountTotal,
    entitiesLoading,
}: StorageControlsProps) {
    const {
        groupsSearchValue,
        storageType,
        visibleEntities,
        storageGroupsGroupByParam,
        handleTextFilterGroupsChange,
        handleStorageTypeChange,
        handleVisibleEntitiesChange,
        handleStorageGroupsGroupByParamChange,
        handleStorageExpertModeChange,
    } = useStorageQueryParams();

    const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
    const [storageExpertModeSettingEnabled] = useSetting<boolean>(
        SETTING_KEYS.ENABLE_STORAGE_EXPERT_MODE,
    );
    const isStorageExpertMode = useIsStorageExpertMode();
    const storageExpertModeAvailable = useBlobStorageCapacityMetricsAvailable();
    const bridgeModeEnabled = useBridgeModeEnabled();
    const blobMetricsEnabled = useBlobStorageCapacityMetricsEnabled();

    const isVDisksPDisksColumnVisible = React.useMemo(() => {
        return columns.some((column) => column.name === STORAGE_GROUPS_COLUMNS_IDS.VDisksPDisks);
    }, [columns]);

    const groupByOptions = React.useMemo(() => {
        return getStorageGroupsGroupByOptions(blobMetricsEnabled, bridgeModeEnabled);
    }, [bridgeModeEnabled, blobMetricsEnabled]);

    const handleGroupBySelectUpdate = (value: string[]) => {
        handleStorageGroupsGroupByParamChange(value[0]);
    };

    const displayTypeSelector = withTypeSelector && isUserAllowedToMakeChanges;
    const canUseStorageExpertMode =
        storageExpertModeAvailable &&
        storageExpertModeSettingEnabled &&
        Boolean(isUserAllowedToMakeChanges);

    return (
        <Flex direction="column" gap={2} width="100%">
            <Flex gap={2} alignItems="center" wrap className={b('controls-row')}>
                <Search
                    tableFilter
                    value={groupsSearchValue}
                    onChange={handleTextFilterGroupsChange}
                    placeholder={i18n('controls_groups-search-placeholder')}
                    className={b('search')}
                />
                {displayTypeSelector && (
                    <StorageTypeFilter value={storageType} onChange={handleStorageTypeChange} />
                )}
                {withGroupBySelect ? null : (
                    <StorageVisibleEntitiesFilter
                        value={visibleEntities}
                        onChange={handleVisibleEntitiesChange}
                    />
                )}
                {withGroupBySelect ? (
                    <React.Fragment>
                        <Text variant="body-2">{i18n('controls_group-by-placeholder')}</Text>
                        <Select
                            hasClear
                            qa="storage-groups-group-by"
                            placeholder={'-'}
                            width={150}
                            defaultValue={
                                storageGroupsGroupByParam ? [storageGroupsGroupByParam] : undefined
                            }
                            onUpdate={handleGroupBySelectUpdate}
                            options={groupByOptions}
                        />
                    </React.Fragment>
                ) : null}
                <EntitiesCount
                    label={i18n('groups')}
                    loading={entitiesLoading}
                    total={entitiesCountTotal}
                    current={entitiesCountCurrent}
                />
                {canUseStorageExpertMode ? (
                    <Button
                        selected={isStorageExpertMode}
                        onClick={() => handleStorageExpertModeChange(!isStorageExpertMode)}
                    >
                        <Icon data={ChartTreemap} />
                        {i18n('controls_expert-mode')}
                    </Button>
                ) : null}
            </Flex>
            {canUseStorageExpertMode && isStorageExpertMode && isVDisksPDisksColumnVisible ? (
                <StorageGroupsExpertModePanel />
            ) : null}
        </Flex>
    );
}

export function StorageGroupsControlsWithTableState({
    withTypeSelector,
    withGroupBySelect,
    columns,
}: {
    withTypeSelector?: boolean;
    withGroupBySelect?: boolean;
    columns?: StorageGroupsColumn[];
}) {
    const {tableState} = usePaginatedTableState();

    return (
        <StorageGroupsControls
            withTypeSelector={withTypeSelector}
            withGroupBySelect={withGroupBySelect}
            columns={columns}
            entitiesCountCurrent={tableState.foundEntities}
            entitiesCountTotal={tableState.totalEntities}
            entitiesLoading={tableState.isInitialLoad}
        />
    );
}