import React, { type FC } from 'react';
import {
    BLOCK_ACCESS_POLICY,
    CARVEOUT_POLICY,
    MONETIZE_POLICY,
} from 'src/constants';
import type { ComposedRule } from 'src/pages/osrPage/views/rightsView/rightsView';

const CLASSNAME = 'RightsSummary';
interface Props {
    rules: ComposedRule[];
}

const RightsSummary: FC<Props> = ({ rules }) => {
    const monetizeCount = rules.filter(
        rule => rule.policy === MONETIZE_POLICY
    ).length;
    const blockCount = rules.filter(
        rule => rule.policy === BLOCK_ACCESS_POLICY
    ).length;
    const carveoutCount = rules.filter(
        rule => rule.policy === CARVEOUT_POLICY
    ).length;
    const summary = [];

    if (monetizeCount)
        summary.push(
            `<span class="monetized">Monetize</span>: ${monetizeCount} Countr${
                monetizeCount > 1 ? 'ies' : 'y'
            }`
        );
    if (blockCount)
        summary.push(
            `Block: ${blockCount} Countr${blockCount > 1 ? 'ies' : 'y'}`
        );
    if (carveoutCount)
        summary.push(
            `Carve-out: ${carveoutCount} Countr${
                carveoutCount > 1 ? 'ies' : 'y'
            }`
        );

    return (
        <div className={CLASSNAME}>
            {!!monetizeCount && (
                <>
                    <span className="policyName">Monetize</span>:{' '}
                    {monetizeCount} Countr{monetizeCount > 1 ? 'ies' : 'y'}
                    {(!!carveoutCount || !!blockCount) && <>&nbsp;|&nbsp;</>}
                </>
            )}
            {!!blockCount && (
                <>
                    <span className="policyName">Block</span>: {blockCount}{' '}
                    Countr{blockCount > 1 ? 'ies' : 'y'}
                    {!!carveoutCount && <>&nbsp;|&nbsp;</>}
                </>
            )}
            {!!carveoutCount && (
                <>
                    <span className="policyName">Carve-out</span>:{' '}
                    {carveoutCount} Countr{carveoutCount > 1 ? 'ies' : 'y'}
                </>
            )}
        </div>
    );
};

export default RightsSummary;