import type { FC } from 'react';
import React from 'react';
import { Tooltip } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import { RestrictionLevel } from 'src/components/deliveryRestrictionsContext/types';
const INTL_PREFIX = 'contentReview.productViewDeliveryRestrictions';

export interface Props {
    label: string;
    levels: RestrictionLevel[];
}

const getLevelMessage = (levels: RestrictionLevel[]): string | null => {
    const isProductLevel = levels.includes(RestrictionLevel.Product);
    const isAccountLevel = levels.includes(RestrictionLevel.Account);
    const isSubaccountLevel = levels.includes(RestrictionLevel.Subaccount);

    if (isAccountLevel && isProductLevel)
        return $t(`${INTL_PREFIX}.restrictedAtProductAndAccountLevel`);

    if (isAccountLevel) return $t(`${INTL_PREFIX}.restrictedAtAccountLevel`);

    if (isSubaccountLevel)
        return $t(`${INTL_PREFIX}.restrictedAtSubaccountLevel`);

    return null;
};

const getToolTip = (levels: RestrictionLevel[]) => {
    const levelMessage = getLevelMessage(levels);

    return levelMessage ? (
        <Tooltip
            id="level-tooltip"
            message={levelMessage}
            placement="right"
            maxWidth={500}
        >
            <GlyphIcon name="info" size={12} className="notDeliveringInfo" />
        </Tooltip>
    ) : null;
};

const NotDeliveringLabel: FC<Props> = ({ label, levels }) => {
    return (
        <div>
            <span
                data-testid="SuiteListView-option-label"
                className="notDeliveringLabel"
            >
                {label}
            </span>
            {getToolTip(levels)}
        </div>
    );
};

export default NotDeliveringLabel;