import type { FC } from 'react';
import React from 'react';
import { TruncatedText } from '@theorchard/suite-components';
import { CountryFlag } from '@theorchard/suite-icons';
import { EMPTY_CHAR } from 'src/constants';
import type { CellProps } from '@theorchard/suite-components/dist/esm/src/components/table/base/types';
import type { ComposedRule } from 'src/pages/osrPage/views/rightsView/rightsView';

export enum RuleType {
    carveout = 'Carve-out',
    block_access = 'Block',
    monetize = 'Monetize',
}

export enum ServiceType {
    tiktok = 'TikTok',
    meta = 'Meta',
}

export const CountryCell: FC<CellProps<ComposedRule>> = ({
    data: { countryName, territoryCodeA2 },
}) => {
    return (
        <>
            <CountryFlag countryCode={territoryCodeA2} />
            <TruncatedText text={countryName || EMPTY_CHAR} maxWidth={200} />
        </>
    );
};

export const RuleCell: FC<CellProps<ComposedRule>> = ({ data: { policy } }) => {
    return (
        <TruncatedText
            text={RuleType[policy as keyof typeof RuleType] || EMPTY_CHAR}
            maxWidth={200}
        />
    );
};

export const ServiceCell: FC<CellProps<ComposedRule>> = ({
    data: { service },
}) => {
    return (
        <TruncatedText
            text={
                ServiceType[service as keyof typeof ServiceType] || EMPTY_CHAR
            }
            maxWidth={200}
        />
    );
};