import type { FC } from 'react';
import React, { useMemo } from 'react';
import { Card, ListBox, SkeletonLoader } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import cx from 'classnames';
import ListBoxSkeleton from 'src/components/skeletons/ListBoxSkeleton';
import NotDeliveringLabel from './notDeliveringLabel';
import type { ContextStore } from 'src/components/deliveryRestrictionsContext/types';

export interface Props {
    className?: string;
    isLoading?: boolean;
    deliveryRestrictions: ContextStore[];
}

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

const ServiceRestrictions: FC<Props> = ({
    className,
    isLoading,
    deliveryRestrictions,
}) => {
    const deliveringOptions = useMemo(
        () =>
            deliveryRestrictions
                .filter(item => item.isDelivering)
                .map(item => ({ label: item.name, value: item.id })),
        [deliveryRestrictions]
    );
    const notDeliveringOptions = useMemo(
        () =>
            deliveryRestrictions
                .filter(item => !item.isDelivering)
                .map(item => ({
                    label: item.name,
                    value: item.id,
                    levels: item.restrictedAtLevel,
                })),
        [deliveryRestrictions]
    );

    const ctTotal = deliveryRestrictions.length;
    const ctDelivering = deliveringOptions.length;
    const ctNotDelivering = notDeliveringOptions.length;

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

    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`}
                    >
                        {isLoading ? (
                            <SkeletonLoader numberOfItems={1} width={130} />
                        ) : (
                            <span>
                                {$t(`${INTL_PREFIX}.servicesTotalLabel`, {
                                    available: ctDelivering,
                                    total: ctTotal,
                                })}
                            </span>
                        )}
                    </Card.Subtitle>
                    {isLoading ? (
                        <ListBoxSkeleton
                            name="delivering"
                            height={490}
                            filterPlaceholder={filterPlaceholder}
                        />
                    ) : (
                        <ListBox
                            testId={`${CLASS_NAME}-delivering-list`}
                            variant="static"
                            options={deliveringOptions}
                            height={490}
                            filterPlaceholder={filterPlaceholder}
                        />
                    )}
                    <div
                        className={`${CLASS_NAME}-delivering-subtext-with-icon`}
                    >
                        <GlyphIcon name="info" size={16} />
                        <span className="subtext">
                            {$t(`${INTL_PREFIX}.serviceRestrictionsNote`)}
                        </span>
                    </div>
                </Card.Body>
            </Card>
            <span className={`${CLASS_NAME}-card-separator`}> </span>
            <Card
                className={CARD_CLASS_NAME}
                data-testid={`${CLASS_NAME}-notDelivering`}
                layout="vertical"
            >
                <Card.Body>
                    <Card.Title>
                        {$t(`${INTL_PREFIX}.notDelivering`)}
                    </Card.Title>
                    <Card.Subtitle
                        data-testid={`${CLASS_NAME}-delivering-count`}
                        className={`${CARD_CLASS_NAME}-subtitle`}
                    >
                        {isLoading ? (
                            <SkeletonLoader numberOfItems={1} width={130} />
                        ) : (
                            <span>
                                {$t(`${INTL_PREFIX}.servicesTotalLabel`, {
                                    available: ctNotDelivering,
                                    total: ctTotal,
                                })}
                            </span>
                        )}
                    </Card.Subtitle>
                    {isLoading ? (
                        <ListBoxSkeleton
                            name="not-delivering"
                            height={490}
                            filterPlaceholder={filterPlaceholder}
                        />
                    ) : (
                        <ListBox
                            testId={`${CLASS_NAME}-notDelivering-list`}
                            variant="static"
                            options={notDeliveringOptions}
                            height={490}
                            filterPlaceholder={filterPlaceholder}
                            components={{
                                OptionLabel: ({
                                    option: { label, levels },
                                }) => (
                                    <NotDeliveringLabel
                                        label={label}
                                        levels={levels}
                                    />
                                ),
                            }}
                        />
                    )}
                </Card.Body>
            </Card>
        </div>
    );
};

export default ServiceRestrictions;