import { ListBox, Modal } from '@theorchard/suite-components';
import { CountryFlag, GlyphIcon } from '@theorchard/suite-icons';
import cx from 'classnames';
import React, { useEffect, useState } from 'react';
import EmptyState from 'src/assets/svg/empty-state-rights.svg';
import { TIKTOK_KEY } from 'src/components/fingerprintRulesOAPanel/fingerprint-rules-oa-panel';
import type { FC } from 'react';
import type { FingerprintRule, Territory } from 'src/types';

const SERVICES_ALLOWED = ['TikTok'];

export interface DeliveryRightsModalProps {
    title: string;
    isOpen: boolean;
    onRequestClose: () => void;
    rules: FingerprintRule[];
    carveoutRules: FingerprintRule[];
    territories: Territory[] | undefined;
    accountType: string;
}

export interface Policy {
    service: string;
    type: string;
    endDate: string | undefined;
    nbOfCountries: number;
    countries: string[];
}

interface PolicyCountry {
    label: string;
    value: string;
    icon: any;
    subtitle?: string;
}

interface GroupedPolicyPerContinent {
    label: string;
    options: PolicyCountry[];
}

const setNumberOfCountriesPerContinent = (
    groupedRules: GroupedPolicyPerContinent[],
    territories: Territory[] | undefined
) => {
    groupedRules.forEach(cgrpc => {
        if (cgrpc.label !== 'Global') {
            let nbOfTerritory = 0;
            territories?.forEach(t => {
                if (t.continent === cgrpc.label) {
                    nbOfTerritory++;
                }
            });
            cgrpc.label = `${cgrpc.label} (${cgrpc.options?.length}/${nbOfTerritory})`;
        }
    });
    return groupedRules;
};

const getCollectingAndNotCollectingRulesPerContinent = (
    rules: FingerprintRule[],
    carveoutRules: FingerprintRule[],
    territories: Territory[] | undefined
) => {
    let collectingGroupedRulesPerContinent: GroupedPolicyPerContinent[] = [
        {
            label: 'Global',
            options: [],
        },
        {
            label: 'Africa',
            options: [],
        },
        {
            label: 'Antarctica',
            options: [],
        },
        {
            label: 'Asia',
            options: [],
        },
        {
            label: 'Europe',
            options: [],
        },
        {
            label: 'North America',
            options: [],
        },
        {
            label: 'Oceania',
            options: [],
        },
        {
            label: 'South America',
            options: [],
        },
    ];
    const notCollectingGroupedRulesPerContinent: GroupedPolicyPerContinent[] = [
        {
            label: 'Global',
            options: [],
        },
        {
            label: 'Africa',
            options: [],
        },
        {
            label: 'Antarctica',
            options: [],
        },
        {
            label: 'Asia',
            options: [],
        },
        {
            label: 'Europe',
            options: [],
        },
        {
            label: 'North America',
            options: [],
        },
        {
            label: 'Oceania',
            options: [],
        },
        {
            label: 'South America',
            options: [],
        },
    ];

    //Handle Global rules
    const foundGlobalCollectingRule = rules.find(r => r.territory === '*');
    const foundGlobalNotCollectingRule = carveoutRules.find(
        r => r.territory === '*'
    );
    if (foundGlobalCollectingRule && foundGlobalNotCollectingRule) {
        collectingGroupedRulesPerContinent[0].options.push({
            label: 'Global',
            value: '*',
            subtitle: $t(
                'fingerprintRules.deliveryRightsModal.globalListBoxSubtitle'
            ),
            icon: (
                <div>
                    <CountryFlag countryCode="GLOBAL" />
                </div>
            ),
        });
        return {
            collectingRulesPerContinent: collectingGroupedRulesPerContinent,
            notCollectingRulesPerContinent: [],
        };
    } else if (foundGlobalCollectingRule) {
        const allCollectingGlobal = rules.filter(r => r.territory === '*');
        if (
            allCollectingGlobal &&
            allCollectingGlobal.length === SERVICES_ALLOWED.length
        ) {
            collectingGroupedRulesPerContinent[0].options.push({
                label: 'Global',
                value: '*',
                subtitle: $t(
                    'fingerprintRules.deliveryRightsModal.globalListBoxSubtitle'
                ),
                icon: (
                    <div>
                        <CountryFlag countryCode="GLOBAL" />
                    </div>
                ),
            });
            return {
                collectingRulesPerContinent: collectingGroupedRulesPerContinent,
                notCollectingRulesPerContinent: [],
            };
        }
        if (rules.length === 1) {
            collectingGroupedRulesPerContinent[0].options.push({
                label: 'Global',
                value: '*',
                subtitle: $t(
                    'fingerprintRules.deliveryRightsModal.globalListBoxSubtitle'
                ),
                icon: (
                    <div>
                        <CountryFlag countryCode="GLOBAL" />
                    </div>
                ),
            });
            return {
                collectingRulesPerContinent: collectingGroupedRulesPerContinent,
                notCollectingRulesPerContinent: [],
            };
        } else {
            collectingGroupedRulesPerContinent[0].options.push({
                label: 'Global',
                value: '*',
                subtitle: $t(
                    'fingerprintRules.deliveryRightsModal.globalListBoxSubtitle'
                ),
                icon: (
                    <div>
                        <CountryFlag countryCode="GLOBAL" />
                    </div>
                ),
            });
        }
    } else if (foundGlobalNotCollectingRule) {
        if (rules.length === 0) {
            notCollectingGroupedRulesPerContinent[0].options.push({
                label: 'Global',
                value: '*',
                subtitle: $t(
                    'fingerprintRules.deliveryRightsModal.globalListBoxSubtitle'
                ),
                icon: (
                    <div>
                        <CountryFlag countryCode="GLOBAL" />
                    </div>
                ),
            });
            return {
                collectingRulesPerContinent: [],
                notCollectingRulesPerContinent:
                    notCollectingGroupedRulesPerContinent,
            };
        }
    }

    //Handle no rules
    if (rules.length === 0 && carveoutRules.length === 0) {
        collectingGroupedRulesPerContinent = [];
    }

    //Handle only carveout rules
    if (rules.length === 0 && carveoutRules.length > 0) {
        collectingGroupedRulesPerContinent = [];
    }

    //Populate collecting and not collecting rules per continent
    territories?.forEach(t => {
        const { territoryCodeA2, territoryName, continent } = t;
        const foundCollectingRule = rules.find(
            r => r.territory === territoryCodeA2
        );
        if (foundCollectingRule) {
            const foundExistingCollecting =
                collectingGroupedRulesPerContinent.find(cgrpc => {
                    const findExisting = cgrpc.options?.find(
                        o => o.value === territoryCodeA2
                    );
                    if (findExisting) return true;
                    return false;
                });
            if (!foundExistingCollecting) {
                const foundGroupedOption =
                    collectingGroupedRulesPerContinent.find(
                        cgrpc => cgrpc.label === continent
                    );
                if (foundGroupedOption) {
                    foundGroupedOption.options.push({
                        label: territoryName,
                        value: territoryCodeA2,
                        icon: (
                            <div>
                                <CountryFlag countryCode={territoryCodeA2} />
                            </div>
                        ),
                    });
                }
            }
        } else {
            //apply inverse list
            const foundExistingNotCollecting =
                notCollectingGroupedRulesPerContinent.find(ncgrpc => {
                    const findExisting = ncgrpc.options?.find(
                        o => o.value === territoryCodeA2
                    );
                    if (findExisting) return true;
                    return false;
                });
            if (!foundExistingNotCollecting) {
                const foundGroupedOption =
                    notCollectingGroupedRulesPerContinent.find(
                        ncgrpc => ncgrpc.label === continent
                    );
                if (foundGroupedOption) {
                    foundGroupedOption.options.push({
                        label: territoryName,
                        value: territoryCodeA2,
                        icon: (
                            <div>
                                <CountryFlag countryCode={territoryCodeA2} />
                            </div>
                        ),
                    });
                }
            }
        }
    });

    //Ensure any carveout rules are in the not collecting section
    carveoutRules.forEach(c => {
        const { territory } = c;
        const foundExisting = notCollectingGroupedRulesPerContinent.find(
            ncgrpc => {
                const findExisting = ncgrpc.options?.find(
                    o => o.value === territory
                );
                if (findExisting) return true;
                return false;
            }
        );
        if (!foundExisting) {
            const foundTerritory = territories?.find(
                t => t.territoryCodeA2 === territory
            );
            const foundGroupedOption =
                notCollectingGroupedRulesPerContinent.find(
                    ncgrpc => ncgrpc.label === foundTerritory?.continent
                );
            if (foundTerritory && foundGroupedOption) {
                foundGroupedOption.options.push({
                    label: foundTerritory.territoryName,
                    value: foundTerritory.territoryCodeA2,
                    icon: (
                        <div>
                            <CountryFlag
                                countryCode={foundTerritory.territoryCodeA2}
                            />
                        </div>
                    ),
                });
            }
        }
    });

    return {
        collectingRulesPerContinent: setNumberOfCountriesPerContinent(
            collectingGroupedRulesPerContinent,
            territories
        ),
        notCollectingRulesPerContinent: setNumberOfCountriesPerContinent(
            notCollectingGroupedRulesPerContinent,
            territories
        ),
    };
};

const getTotalNumberOfGroupedRulesCountries = (
    groupedRules: GroupedPolicyPerContinent[]
) => {
    let nbOfNotCollectingCountries = 0;
    const foundGlobalTerritory = groupedRules.find(
        r => r.label === 'Global' && r.options.length > 0
    );
    if (foundGlobalTerritory) return 249;

    groupedRules.forEach(gr => {
        const { options } = gr;
        nbOfNotCollectingCountries += options.length;
    });
    return nbOfNotCollectingCountries;
};

const getCollectingAndNotCollectingServices = (
    collectingRules: FingerprintRule[]
) => {
    const collectingServices = collectingRules.map(r => r.service);
    const uniqueCollectingServices = [...new Set(collectingServices)];

    const notCollecting = [] as string[];
    if (uniqueCollectingServices.length !== SERVICES_ALLOWED.length)
        SERVICES_ALLOWED.forEach(sa => {
            if (!uniqueCollectingServices.includes(sa)) notCollecting.push(sa);
        });

    return {
        collectingRulesPerService: uniqueCollectingServices.map(s => ({
            label: s,
            value: s,
        })),
        notCollectingRulesPerService: notCollecting.map(nc => ({
            label: nc,
            value: nc,
        })),
    };
};

export const CLASS_NAME = 'DeliveryRightsModal';
export const DeliveryRightsModal: FC<DeliveryRightsModalProps> = ({
    title,
    isOpen,
    onRequestClose,
    carveoutRules,
    rules,
    territories,
    accountType,
}) => {
    const [countryFilter, setCountryFilter] = useState(false);
    const [serviceFilter, setServiceFilter] = useState(true);
    const [
        showServiceAllowedAndNotAllowed,
        setShowServiceAllowedAndNotAllowed,
    ] = useState(false);
    const [
        showCountryAllowedAndNotAllowed,
        setShowCountryAllowedAndNotAllowed,
    ] = useState(false);
    const [allowedServices, setCollectingServices] = useState<
        { label: string; value: string }[]
    >([]);
    const [notAllowedServices, setNotCollectingServices] = useState<
        { label: string; value: string }[]
    >([]);
    const [allowedCountries, setAllowedCountries] = useState<
        GroupedPolicyPerContinent[]
    >([]);
    const [notAllowedCountries, setNotAllowedCountries] = useState<
        GroupedPolicyPerContinent[]
    >([]);

    const labelType = accountType === 'Vendor' ? 'Account' : 'Subaccount';

    const filteredRules = rules.filter(
        r => r.service.toLowerCase() === TIKTOK_KEY
    );
    const filteredCarveoutRules = carveoutRules.filter(
        c => c.service.toLowerCase() === TIKTOK_KEY
    );

    const activeCollectingRules = filteredRules.filter(r => r.active);
    const activeNotCollectingRules = filteredCarveoutRules.filter(
        c => c.active
    );

    const { collectingRulesPerService, notCollectingRulesPerService } =
        getCollectingAndNotCollectingServices(activeCollectingRules);

    const { collectingRulesPerContinent, notCollectingRulesPerContinent } =
        getCollectingAndNotCollectingRulesPerContinent(
            activeCollectingRules,
            activeNotCollectingRules,
            territories
        );

    const nbOfCollectingCountries = getTotalNumberOfGroupedRulesCountries(
        collectingRulesPerContinent
    );
    const nbOfNotCollectingCountries = getTotalNumberOfGroupedRulesCountries(
        notCollectingRulesPerContinent
    );
    const nbOfFilteredCollectingCountries =
        getTotalNumberOfGroupedRulesCountries(allowedCountries);
    const nbOfFilteredNotCollectingCountries =
        getTotalNumberOfGroupedRulesCountries(notAllowedCountries);

    const handleCountryChange = (event: any) => {
        if (countryFilter && !serviceFilter) return;
        setCountryFilter(!countryFilter);
        setServiceFilter(false);
    };
    const handleServiceChange = (event: any) => {
        if (serviceFilter && !countryFilter) return;
        setServiceFilter(!serviceFilter);
        setCountryFilter(false);
    };
    const handleSelectedCountryChange = (event: any) => {
        if (!showServiceAllowedAndNotAllowed)
            setShowServiceAllowedAndNotAllowed(true);
        const selectedCountry = event.value;

        const servicesCollecting = filteredRules
            .filter(r => r.territory === selectedCountry)
            .map(r => r.service);
        const uniqueCollectingServices = [...new Set(servicesCollecting)];
        const servicesCollectingOptions = uniqueCollectingServices.map(sa => ({
            label: sa,
            value: sa,
        }));

        const servicesNotCollecting = [] as string[];
        SERVICES_ALLOWED.forEach(sa => {
            if (!uniqueCollectingServices.includes(sa))
                servicesNotCollecting.push(sa);
        });
        const servicesNotCollectingOptions = servicesNotCollecting.map(sa => ({
            label: sa,
            value: sa,
        }));

        setCollectingServices(servicesCollectingOptions);
        setNotCollectingServices(servicesNotCollectingOptions);
    };
    const handleSelectedServiceChange = (event: any) => {
        if (!showCountryAllowedAndNotAllowed)
            setShowCountryAllowedAndNotAllowed(true);

        const selectedService = event.value;
        const filteredCountriesAllowed = activeCollectingRules.filter(
            r => r.service === selectedService
        );
        const filteredCountriesNotAllowed = activeNotCollectingRules.filter(
            r => r.service === selectedService
        );

        const { collectingRulesPerContinent, notCollectingRulesPerContinent } =
            getCollectingAndNotCollectingRulesPerContinent(
                filteredCountriesAllowed,
                filteredCountriesNotAllowed,
                territories
            );

        setAllowedCountries(collectingRulesPerContinent);
        setNotAllowedCountries(notCollectingRulesPerContinent);
    };
    const handleModalClose = () => {
        onRequestClose();
        setCountryFilter(false);
        setServiceFilter(true);
        setShowServiceAllowedAndNotAllowed(false);
        setShowCountryAllowedAndNotAllowed(false);
    };

    useEffect(() => {
        // if we have only one service — TikTok, pre-select it by default
        if (isOpen && collectingRulesPerService.length === 1) {
            handleSelectedServiceChange(collectingRulesPerService[0]);
        }
    }, [isOpen]);

    return (
        <div className={`${CLASS_NAME}`}>
            <Modal
                isOpen={isOpen}
                onRequestClose={handleModalClose}
                title={title}
                testId="delivery-rights-modal"
            >
                <div className={`${CLASS_NAME}-first-filters`}>
                    <span>
                        {$t(
                            'fingerprintRules.deliveryRightsModal.header.title'
                        )}
                    </span>
                    <button
                        className={cx(
                            `${CLASS_NAME}-first-filters-button`,
                            `${serviceFilter ? 'selected' : 'notSelected'}`
                        )}
                        onClick={handleServiceChange}
                        data-testid="btn-service"
                    >
                        {serviceFilter && (
                            <GlyphIcon name="check" size={12} inverse />
                        )}
                        {$t(
                            'fingerprintRules.deliveryRightsModal.filters.service'
                        )}
                    </button>
                    <span className={`${CLASS_NAME}-first-filters-span`}>
                        or
                    </span>
                    <button
                        className={cx(
                            `${CLASS_NAME}-first-filters-button`,
                            `${countryFilter ? 'selected' : 'notSelected'}`
                        )}
                        onClick={handleCountryChange}
                        data-testid="btn-country"
                    >
                        {countryFilter && (
                            <GlyphIcon name="check" size={12} inverse />
                        )}
                        {$t(
                            'fingerprintRules.deliveryRightsModal.filters.country'
                        )}
                    </button>
                </div>
                {countryFilter && (
                    <div className={`${CLASS_NAME}-body`}>
                        <div className={`${CLASS_NAME}-body-left`}>
                            <div className={`${CLASS_NAME}-body-data`}>
                                <div>
                                    {collectingRulesPerContinent.length ===
                                        0 && (
                                        <div
                                            className={`${CLASS_NAME}-empty-state`}
                                        >
                                            <img
                                                src={String(EmptyState)}
                                                className={`${CLASS_NAME}-img`}
                                            />
                                            <p
                                                className={`${CLASS_NAME}-empty-state-info`}
                                            >
                                                {$t(
                                                    'fingerprintRules.deliveryRightsModal.emptyState.notAllowed.country',
                                                    {
                                                        accountType: labelType,
                                                    }
                                                )}
                                            </p>
                                        </div>
                                    )}
                                    {collectingRulesPerContinent.length > 0 && (
                                        <div>
                                            <div
                                                className={`${CLASS_NAME}-body-left-header`}
                                            >
                                                <p
                                                    className={`${CLASS_NAME}-body-left-title`}
                                                >
                                                    {showServiceAllowedAndNotAllowed && (
                                                        <span
                                                            className={`${CLASS_NAME}-previous-span`}
                                                            onClick={() =>
                                                                setShowServiceAllowedAndNotAllowed(
                                                                    !showServiceAllowedAndNotAllowed
                                                                )
                                                            }
                                                        >
                                                            <GlyphIcon
                                                                name="arrowLeft"
                                                                size={16}
                                                            />
                                                        </span>
                                                    )}
                                                    {$t(
                                                        'fingerprintRules.deliveryRightsModal.restriction.leftTitle'
                                                    )}
                                                </p>
                                            </div>
                                            <div
                                                className={`${CLASS_NAME}-body-right-header`}
                                            >
                                                <p
                                                    className={`${CLASS_NAME}-body-right-nb-countries`}
                                                >
                                                    {`${nbOfCollectingCountries}/249`}
                                                </p>
                                            </div>
                                            <div
                                                className={`${CLASS_NAME}-body-table`}
                                            >
                                                <div>
                                                    <p
                                                        className={`${CLASS_NAME}-body-table-select-title`}
                                                    >
                                                        {$t(
                                                            'fingerprintRules.deliveryRightsModal.collectingCountryOptionsTitle'
                                                        )}
                                                    </p>
                                                </div>
                                                <ListBox
                                                    options={
                                                        collectingRulesPerContinent
                                                    }
                                                    onChange={
                                                        handleSelectedCountryChange
                                                    }
                                                    minHeight={300}
                                                />
                                            </div>
                                        </div>
                                    )}
                                </div>
                            </div>
                        </div>
                        <div
                            className={cx(`${CLASS_NAME}-body-right`, {
                                'splitted-view':
                                    showServiceAllowedAndNotAllowed,
                            })}
                        >
                            <div className={`${CLASS_NAME}-body-data`}>
                                {!showServiceAllowedAndNotAllowed && (
                                    <div>
                                        {notCollectingRulesPerContinent.length ===
                                            0 && (
                                            <div
                                                className={`${CLASS_NAME}-empty-state`}
                                            >
                                                <img
                                                    src={String(EmptyState)}
                                                    className={`${CLASS_NAME}-img`}
                                                />
                                                <p
                                                    className={`${CLASS_NAME}-empty-state-info`}
                                                >
                                                    {$t(
                                                        'fingerprintRules.deliveryRightsModal.emptyState.collecting.country',
                                                        {
                                                            accountType:
                                                                labelType,
                                                        }
                                                    )}
                                                </p>
                                            </div>
                                        )}
                                        {notCollectingRulesPerContinent.length >
                                            0 && (
                                            <div>
                                                <div
                                                    className={`${CLASS_NAME}-body-left-header`}
                                                >
                                                    <p
                                                        className={`${CLASS_NAME}-body-left-title`}
                                                    >
                                                        {$t(
                                                            'fingerprintRules.deliveryRightsModal.restriction.rightTitle'
                                                        )}
                                                    </p>
                                                </div>
                                                <div>
                                                    <div
                                                        className={`${CLASS_NAME}-body-right-header`}
                                                    >
                                                        <p
                                                            className={`${CLASS_NAME}-body-right-nb-countries`}
                                                        >
                                                            {`${nbOfNotCollectingCountries}/249`}
                                                        </p>
                                                    </div>
                                                    <div
                                                        className={`${CLASS_NAME}-body-not-collecting`}
                                                    >
                                                        <ListBox
                                                            options={
                                                                notCollectingRulesPerContinent
                                                            }
                                                            minHeight={300}
                                                        />
                                                    </div>
                                                </div>
                                            </div>
                                        )}
                                    </div>
                                )}
                                {showServiceAllowedAndNotAllowed && (
                                    <div
                                        className={`${CLASS_NAME}-service-body`}
                                    >
                                        <div
                                            className={`${CLASS_NAME}-service-body-allowed`}
                                        >
                                            <div
                                                className={`${CLASS_NAME}-service-body-title`}
                                            >
                                                <div
                                                    className={`${CLASS_NAME}-service-body-title-left`}
                                                >
                                                    <p
                                                        className={`${CLASS_NAME}-service-body-title`}
                                                    >
                                                        {$t(
                                                            'fingerprintRules.deliveryRightsModal.services.allowed'
                                                        )}
                                                    </p>
                                                </div>
                                                <div
                                                    className={`${CLASS_NAME}-service-body-title-right`}
                                                >
                                                    <p
                                                        className={`${CLASS_NAME}-service-body-title-right-nb-services`}
                                                    >{`${allowedServices.length}/1`}</p>
                                                </div>
                                            </div>
                                            <ListBox
                                                options={allowedServices}
                                                minHeight={300}
                                            />
                                        </div>
                                        <div
                                            className={`${CLASS_NAME}-service-body-not-allowed`}
                                        >
                                            {notAllowedServices.length ===
                                                0 && (
                                                <div
                                                    className={`${CLASS_NAME}-empty-state`}
                                                >
                                                    <img
                                                        src={String(EmptyState)}
                                                        className={`${CLASS_NAME}-img`}
                                                    />
                                                    <p
                                                        className={`${CLASS_NAME}-empty-state-info`}
                                                    >
                                                        {$t(
                                                            'fingerprintRules.deliveryRightsModal.emptyState.collecting.service',
                                                            {
                                                                accountType:
                                                                    labelType,
                                                            }
                                                        )}
                                                    </p>
                                                </div>
                                            )}
                                            {notAllowedServices.length > 0 && (
                                                <div>
                                                    <div
                                                        className={`${CLASS_NAME}-service-body-title`}
                                                    >
                                                        <div
                                                            className={`${CLASS_NAME}-service-body-title-left`}
                                                        >
                                                            <p
                                                                className={`${CLASS_NAME}-service-body-title`}
                                                            >
                                                                {$t(
                                                                    'fingerprintRules.deliveryRightsModal.services.notAllowed'
                                                                )}
                                                            </p>
                                                        </div>
                                                        <div
                                                            className={`${CLASS_NAME}-service-body-title-right`}
                                                        >
                                                            <p
                                                                className={`${CLASS_NAME}-service-body-title-right-nb-services`}
                                                            >{`${notAllowedServices.length}/1`}</p>
                                                        </div>
                                                    </div>
                                                    <ListBox
                                                        options={
                                                            notAllowedServices
                                                        }
                                                        minHeight={300}
                                                    />
                                                </div>
                                            )}
                                        </div>
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>
                )}
                {serviceFilter && (
                    <div className={`${CLASS_NAME}-body`}>
                        <div className={`${CLASS_NAME}-body-left`}>
                            <div className={`${CLASS_NAME}-body-data`}>
                                <div>
                                    {collectingRulesPerService.length === 0 && (
                                        <div
                                            className={`${CLASS_NAME}-empty-state`}
                                        >
                                            <img
                                                src={String(EmptyState)}
                                                className={`${CLASS_NAME}-img`}
                                            />
                                            <p
                                                className={`${CLASS_NAME}-empty-state-info`}
                                            >
                                                {$t(
                                                    'fingerprintRules.deliveryRightsModal.emptyState.notAllowed.service',
                                                    {
                                                        accountType: labelType,
                                                    }
                                                )}
                                            </p>
                                        </div>
                                    )}
                                    {collectingRulesPerService.length > 0 && (
                                        <div>
                                            <div
                                                className={`${CLASS_NAME}-body-left-header`}
                                            >
                                                <p
                                                    className={`${CLASS_NAME}-body-left-title`}
                                                >
                                                    {showCountryAllowedAndNotAllowed && (
                                                        <span
                                                            className={`${CLASS_NAME}-previous-span`}
                                                            onClick={() =>
                                                                setShowCountryAllowedAndNotAllowed(
                                                                    !showCountryAllowedAndNotAllowed
                                                                )
                                                            }
                                                        >
                                                            <GlyphIcon
                                                                name="arrowLeft"
                                                                size={16}
                                                            />
                                                        </span>
                                                    )}
                                                    {$t(
                                                        'fingerprintRules.deliveryRightsModal.restriction.leftTitle'
                                                    )}
                                                </p>
                                            </div>
                                            <div
                                                className={`${CLASS_NAME}-body-right-header`}
                                            >
                                                <p
                                                    className={`${CLASS_NAME}-body-right-nb-countries`}
                                                >{`${collectingRulesPerService.length}/${SERVICES_ALLOWED.length}`}</p>
                                            </div>
                                            <div
                                                className={`${CLASS_NAME}-body-table`}
                                            >
                                                <div>
                                                    <div>
                                                        <p
                                                            className={`${CLASS_NAME}-body-table-select-title`}
                                                        >
                                                            {$t(
                                                                'fingerprintRules.deliveryRightsModal.collectingServiceOptionsTitle'
                                                            )}
                                                        </p>
                                                    </div>
                                                    <ListBox
                                                        options={
                                                            collectingRulesPerService
                                                        }
                                                        onChange={
                                                            handleSelectedServiceChange
                                                        }
                                                        minHeight={300}
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    )}
                                </div>
                            </div>
                        </div>
                        <div
                            className={cx(`${CLASS_NAME}-body-right`, {
                                'splitted-view':
                                    showCountryAllowedAndNotAllowed,
                            })}
                        >
                            <div className={`${CLASS_NAME}-body-data`}>
                                <div>
                                    {!showCountryAllowedAndNotAllowed && (
                                        <div>
                                            {notCollectingRulesPerService.length ===
                                                0 && (
                                                <div
                                                    className={`${CLASS_NAME}-empty-state`}
                                                >
                                                    <img
                                                        src={String(EmptyState)}
                                                        className={`${CLASS_NAME}-img`}
                                                    />
                                                    <p
                                                        className={`${CLASS_NAME}-empty-state-info`}
                                                    >
                                                        {$t(
                                                            'fingerprintRules.deliveryRightsModal.emptyState.collecting.service',
                                                            {
                                                                accountType:
                                                                    labelType,
                                                            }
                                                        )}
                                                    </p>
                                                </div>
                                            )}
                                            {notCollectingRulesPerService.length >
                                                0 && (
                                                <div>
                                                    <div
                                                        className={`${CLASS_NAME}-body-left-header`}
                                                    >
                                                        <p
                                                            className={`${CLASS_NAME}-body-left-title`}
                                                        >
                                                            {$t(
                                                                'fingerprintRules.deliveryRightsModal.restriction.rightTitle'
                                                            )}
                                                        </p>
                                                    </div>
                                                    <div
                                                        className={`${CLASS_NAME}-body-right-header`}
                                                    >
                                                        <p
                                                            className={`${CLASS_NAME}-body-right-nb-countries`}
                                                        >{`${notCollectingRulesPerService.length}/${SERVICES_ALLOWED.length}`}</p>
                                                    </div>
                                                    <div
                                                        className={`${CLASS_NAME}-body-not-collecting`}
                                                    >
                                                        <ListBox
                                                            options={
                                                                notCollectingRulesPerService
                                                            }
                                                            minHeight={300}
                                                        />
                                                    </div>
                                                </div>
                                            )}
                                        </div>
                                    )}
                                    {showCountryAllowedAndNotAllowed && (
                                        <div
                                            className={`${CLASS_NAME}-country-body`}
                                        >
                                            <div
                                                className={`${CLASS_NAME}-country-body-allowed`}
                                            >
                                                <div
                                                    className={`${CLASS_NAME}-country-body-title`}
                                                >
                                                    <div
                                                        className={`${CLASS_NAME}-country-body-title-left`}
                                                    >
                                                        <p
                                                            className={`${CLASS_NAME}-country-body-title`}
                                                        >
                                                            {$t(
                                                                'fingerprintRules.deliveryRightsModal.countries.allowed'
                                                            )}
                                                        </p>
                                                    </div>
                                                    <div
                                                        className={`${CLASS_NAME}-country-body-title-right`}
                                                    >
                                                        <p
                                                            className={`${CLASS_NAME}-country-body-title-right-nb-services`}
                                                        >{`${nbOfFilteredCollectingCountries}/249`}</p>
                                                    </div>
                                                </div>
                                                <ListBox
                                                    options={allowedCountries}
                                                    minHeight={300}
                                                />
                                            </div>
                                            <div
                                                className={`${CLASS_NAME}-country-body-not-allowed`}
                                            >
                                                {notAllowedCountries.length >
                                                    0 && (
                                                    <div>
                                                        <div
                                                            className={`${CLASS_NAME}-country-body-title`}
                                                        >
                                                            <div
                                                                className={`${CLASS_NAME}-country-body-title-left`}
                                                            >
                                                                <p
                                                                    className={`${CLASS_NAME}-country-body-title`}
                                                                >
                                                                    {$t(
                                                                        'fingerprintRules.deliveryRightsModal.countries.notAllowed'
                                                                    )}
                                                                </p>
                                                            </div>
                                                            <div
                                                                className={`${CLASS_NAME}-country-body-title-right`}
                                                            >
                                                                <p
                                                                    className={`${CLASS_NAME}-country-body-title-right-nb-countries`}
                                                                >{`${nbOfFilteredNotCollectingCountries}/249`}</p>
                                                            </div>
                                                        </div>
                                                        <ListBox
                                                            options={
                                                                notAllowedCountries
                                                            }
                                                            minHeight={300}
                                                        />
                                                    </div>
                                                )}
                                                {notAllowedCountries.length ===
                                                    0 && (
                                                    <div>
                                                        <div
                                                            className={`${CLASS_NAME}-empty-state`}
                                                        >
                                                            <img
                                                                src={String(
                                                                    EmptyState
                                                                )}
                                                                className={`${CLASS_NAME}-img`}
                                                            />
                                                            <p
                                                                className={`${CLASS_NAME}-empty-state-info`}
                                                            >
                                                                {$t(
                                                                    'fingerprintRules.deliveryRightsModal.emptyState.collecting.country',
                                                                    {
                                                                        accountType:
                                                                            labelType,
                                                                    }
                                                                )}
                                                            </p>
                                                        </div>
                                                    </div>
                                                )}
                                            </div>
                                        </div>
                                    )}
                                </div>
                            </div>
                        </div>
                    </div>
                )}
            </Modal>
        </div>
    );
};

export default DeliveryRightsModal;