Untitled

import React from 'react';

import { keepPreviousData } from '@tanstack/react-query';

import type { DefinitionListItem } from '@gravity-ui/components';
import { DefinitionList } from '@gravity-ui/components';
import { Label } from '@gravity-ui/uikit';
import type { Resource } from '@yandex-data-ui/cloud-schemas/build/models/cdn';

import Page from 'ui/components/Page/Page';
import { Section } from 'ui/components/Section/Section';
import { SetPageDataLoaded, useAppParams } from 'ui/hooks';
import { QueryDataLoader, useQueryData } from 'ui/services/data-source';
import { getStatusName } from 'ui/utils/common';
import { i18n } from 'ui/utils/i18n';

import {
    ActivateAction,
    ShieldingActionType,
    ShieldingActions,
} from 'ui/units/cdn/components/ShieldingActions/ShieldingActions';
import { ShieldingPrice } from 'ui/units/cdn/components/ShieldingPrice/ShieldingPrice';
import { getShielding, listShieldingAvailableLocations } from 'ui/units/cdn/data-sources';
import { shieldingLocationStrValue } from 'ui/units/cdn/utils';
import { mergeStatuses } from '@gravity-ui/data-source';

const i18nK = i18n.bind(null, 'cdn');

interface ShieldingViewProps {
    resource: Resource;
    refetch: () => void;
}

export const ResourceShieldingView: React.FC<ShieldingViewProps> = ({ resource, refetch }) => {
    const params = useAppParams();
    const { resourceId = '', folderId } = params;

    const {
        data: shielding,
        status,
        error,
        refetch: refetchShielding,
    } = useQueryData(getShielding, { resourceId }, { placeholderData: keepPreviousData });

    const {
        data: shieldingLocations,
        status: shieldingLocationsStatus,
        error: shieldingLocationsError,
    } = useQueryData(
        listShieldingAvailableLocations,
        { folderId },
        { placeholderData: keepPreviousData },
    );

    const resourceWithShielding = {
        ...resource,
        shielding,
    };

    const additionalItems: DefinitionListItem[] = shielding
        ? [
              {
                  name: i18nK('label_shielding-status'),
                  content: (
                      <Label theme="success">
                          {getStatusName(i18nK('value_shielding-status-ok'))}
                      </Label>
                  ),
              },
              {
                  name: i18nK('label_shielding-location'),
                  content: shieldingLocationStrValue(shielding),
              },
          ]
        : [
              {
                  name: i18nK('label_shielding-status'),
                  content: (
                      <Label theme="unknown">
                          {getStatusName(i18nK('value_shielding-status-not-activated'))}
                      </Label>
                  ),
              },
          ];

    return (
        <React.Fragment>
            <QueryDataLoader
                status={mergeStatuses([status, shieldingLocationsStatus])}
                error={error || shieldingLocationsError}
            >
                {shielding && shieldingLocations && (
                    <ShieldingActions
                        resource={resourceWithShielding}
                        shieldingLocations={shieldingLocations}
                        onRefresh={refetchShielding}
                    >
                        {({ getSecondaryActions, getActionHandler }) => {
                            const primaryActions = [
                                <ActivateAction
                                    key="activate"
                                    resource={resourceWithShielding}
                                    onUpdate={(checked) => {
                                        const actionType = checked
                                            ? ShieldingActionType.Activate
                                            : ShieldingActionType.Deactivate;
                                        const handle = getActionHandler(
                                            resourceWithShielding,
                                            actionType,
                                        );
                                        handle?.();
                                    }}
                                />,
                            ];

                            const secondaryActions = getSecondaryActions(resourceWithShielding);

                            return (
                                <Page
                                    title={i18nK('label_shielding')}
                                    primaryActions={primaryActions}
                                    secondaryActions={secondaryActions}
                                    withSection
                                    withPadding
                                >
                                    <Section title={i18nK('label_settings')}>
                                        <DefinitionList items={additionalItems} />
                                    </Section>
                                    {shielding || shieldingLocations.length === 0 ? null : (
                                        <ShieldingPrice
                                            resourceId={resourceId}
                                            locationId={shieldingLocations[0].locationId}
                                        />
                                    )}
                                </Page>
                            );
                        }}
                    </ShieldingActions>
                )}
            </QueryDataLoader>
            <SetPageDataLoaded />
        </React.Fragment>
    );
};