import type { FC } from 'react';
import React from 'react';
import { Card, ListBox } from '@theorchard/suite-components';
import cx from 'classnames';
import ListBoxSkeleton from 'src/components/skeletons/ListBoxSkeleton';
import NotDeliveringLabel from './notDeliveringLabel';
import { formatCountriesOptions } from './utils';
import type { ContextTerritory } from 'src/components/deliveryRestrictionsContext/types';
import type { RestrictionLevel } from 'src/components/deliveryRestrictionsContext/types';

export interface Props {
    className?: string;
    isLoading?: boolean;
    territoryDeliveryRestrictions: ContextTerritory[];
}

const INTL_PREFIX = 'contentReview.productViewDeliveryRestrictions';
const CLASS_NAME = 'CountryRestrictions';
const CARD_CLASS_NAME = `${CLASS_NAME}-card`;

interface CountryOption {
    label: string;
    value: string;
    icon: React.ReactNode;
    levels: RestrictionLevel[];
}
interface CountryOptionWrapper {
    label: string;
    value: string;
    options: CountryOption[];
}

const CountryRestrictions: FC<Props> = ({
    className,
    isLoading,
    territoryDeliveryRestrictions,
}) => {
    const notDelivering = territoryDeliveryRestrictions.filter(
        t => !t.isDelivering
    );
    const delivering = territoryDeliveryRestrictions.filter(
        t => t.isDelivering
    );

    const filterPlaceholder = $t(`${INTL_PREFIX}.countryFilterPlaceholder`);

    return (
        <div className={cx(className, CLASS_NAME)} data-testid={CLASS_NAME}>
            <Card
                className={CARD_CLASS_NAME}
                data-testid={`${CLASS_NAME}-delivering`}
                layout="vertical"
            >
                <Card.Body>
                    <Card.Title>{$t(`${INTL_PREFIX}.delivering`)}</Card.Title>
                    <Card.Subtitle
                        data-testid={`${CLASS_NAME}-delivering-count`}
                        className={`${CARD_CLASS_NAME}-subtitle`}
                    >
                        {$t(`${INTL_PREFIX}.countriesTotalLabel`, {
                            available: delivering.length,
                            total: territoryDeliveryRestrictions.length,
                        })}
                    </Card.Subtitle>
                    {isLoading ? (
                        <ListBoxSkeleton
                            name="delivering"
                            height={490}
                            filterPlaceholder={filterPlaceholder}
                        />
                    ) : (
                        <ListBox
                            testId={`${CLASS_NAME}-delivering-list`}
                            variant="static"
                            height={490}
                            options={formatCountriesOptions(delivering)}
                            filterPlaceholder={filterPlaceholder}
                        />
                    )}
                </Card.Body>
            </Card>
            <span className={`${CLASS_NAME}-card-separator`}> </span>
            <Card
                className={`${CLASS_NAME}-card`}
                data-testid={`${CLASS_NAME}-notDelivering`}
                layout="vertical"
            >
                <Card.Body>
                    <Card.Title>
                        {$t(`${INTL_PREFIX}.notDelivering`)}
                    </Card.Title>
                    <Card.Subtitle
                        data-testid={`${CLASS_NAME}-notDelivering-count`}
                        className={`${CARD_CLASS_NAME}-subtitle`}
                    >
                        {$t(`${INTL_PREFIX}.countriesTotalLabel`, {
                            available: notDelivering.length,
                            total: territoryDeliveryRestrictions.length,
                        })}
                    </Card.Subtitle>
                    {isLoading ? (
                        <ListBoxSkeleton
                            name="delivering"
                            height={490}
                            filterPlaceholder={filterPlaceholder}
                        />
                    ) : (
                        <ListBox
                            testId={`${CLASS_NAME}-notDelivering-list`}
                            variant="static"
                            height={490}
                            options={
                                formatCountriesOptions(
                                    notDelivering
                                ) as CountryOptionWrapper[]
                            }
                            filterPlaceholder={filterPlaceholder}
                            components={{
                                OptionLabel: ({
                                    option: { label, levels },
                                }) => (
                                    <NotDeliveringLabel
                                        label={label}
                                        levels={levels}
                                    />
                                ),
                            }}
                        />
                    )}
                </Card.Body>
            </Card>
        </div>
    );
};

export default CountryRestrictions;