import {ClipboardButton} from '@gravity-ui/uikit';

import {useClusterBaseInfo} from '../../../store/reducers/cluster/cluster';
import type {AdditionalClusterProps} from '../../../types/additionalProps';
import type {GetClusterLinks, GetDatabaseLinks} from '../../../uiFactory/types';
import {CLUSTER_LINK_CONTEXT} from '../../../utils/clusterLinks/clusterLinkConstants';
import {cn} from '../../../utils/cn';
import {MONITORING_UI_TITLE} from '../../../utils/constants';
import type {GetLogsLink} from '../../../utils/logs';
import type {GetMonitoringClusterLink, GetMonitoringLink} from '../../../utils/monitoring';
import {getCleanBalancerValue} from '../../../utils/parseBalancer';
import type {Cluster} from '../../Cluster/Cluster';
import {useAdditionalTenantsProps} from '../utils/useAdditionalTenantsProps';

import './ExtendedCluster.scss';

const b = cn('extended-cluster');

const getAdditionalBalancerInfo = (balancer: string) => {
    const cleanedValue = getCleanBalancerValue(balancer);

    return {
        label: 'Balancer',
        value: (
            <div className={b('balancer')}>
                {cleanedValue}
                <ClipboardButton
                    view="flat-secondary"
                    text={cleanedValue}
                    size="xs"
                    className={b('clipboard-button')}
                />
            </div>
        ),
    };
};

interface GetAdditionalClusterProps {
    getMonitoringClusterLink?: GetMonitoringClusterLink;
    getClusterLinks?: GetClusterLinks;
}

export const useAdditionalClusterProps = ({
    getMonitoringClusterLink,
    getClusterLinks,
}: GetAdditionalClusterProps) => {
    const clusterInfo = useClusterBaseInfo();
    const {name: clusterName, balancer, monitoring} = clusterInfo;

    const additionalClusterProps: AdditionalClusterProps = {};
    additionalClusterProps.links = [];
    if (monitoring && getMonitoringClusterLink) {
        const clusterLink = getMonitoringClusterLink(monitoring, clusterName);

        if (clusterLink) {
            additionalClusterProps.links.push({
                title: MONITORING_UI_TITLE,
                url: clusterLink,
                context: CLUSTER_LINK_CONTEXT.MONITORING,
            });
        }
    }

    if (getClusterLinks) {
        const clusterLinks = getClusterLinks({clusterInfo});
        additionalClusterProps.links.push(...clusterLinks);
    }

    if (balancer) {
        additionalClusterProps.info = [getAdditionalBalancerInfo(balancer)];
    }

    return additionalClusterProps;
};

interface ExtendedClusterProps {
    component: typeof Cluster;
    getMonitoringLink?: GetMonitoringLink;
    getMonitoringClusterLink?: GetMonitoringClusterLink;
    getLogsLink?: GetLogsLink;
    getDatabaseLinks?: GetDatabaseLinks;
    getClusterLinks?: GetClusterLinks;
}
export function ExtendedCluster({
    component: ClusterComponent,
    getMonitoringLink,
    getMonitoringClusterLink,
    getLogsLink,
    getDatabaseLinks,
    getClusterLinks,
}: ExtendedClusterProps) {
    return (
        <div className={b()}>
            <ClusterComponent
                additionalClusterProps={useAdditionalClusterProps({
                    getMonitoringClusterLink,
                    getClusterLinks,
                })}
                additionalTenantsProps={useAdditionalTenantsProps({
                    getMonitoringLink,
                    getLogsLink,
                    getDatabaseLinks,
                })}
            />
        </div>
    );
}