import type { FC } from 'react';
import React from 'react';
import { Section } from '@theorchard/suite-components';
import { Page } from '@theorchard/suite-frontend';
import cx from 'classnames';
import {
    DeliveryRestrictionsProvider,
    useDeliveryRestrictionsContext,
} from 'src/components/deliveryRestrictionsContext/useDeliveryRestrictionsContext';
import { COUNTRY, COUNTRY_SERVICE, SERVICE } from 'src/constants';
import SectionTitle from '../sectionTitle';
import CountryRestrictions from './countryRestrictions';
import { CountryXServicePairing } from './countryXServicePairing';
import ServiceRestrictions from './serviceRestrictions';
import type { Product } from 'src/data/queries/product/types';
import type { SubmissionType } from 'src/types';

export const PARENT_CLASS_NAME = 'ProductModal';
export const CLASS_NAME = `${PARENT_CLASS_NAME}-Components-ViewDeliveryRestrictions`;
export const SUBGROUP_CLASS_NAME = `${CLASS_NAME}-subgroup`;
export const INTL_PREFIX = 'contentReview.productViewDeliveryRestrictions';

export interface Props {
    className?: string;
    testId?: string;
    product: Product;
    submissionType?: SubmissionType;
    onFingerprintRulesUpdated: (rulesUpdatedNum: number) => void;
}

const ProductViewDeliveryRestrictionsContent: FC<Props> = ({
    className,
    testId,
    product,
    submissionType,
    onFingerprintRulesUpdated,
}) => {
    const {
        stores,
        storesLoading,
        territories,
        territoriesLoading,
        storeTerritories,
        storeTerritoriesLoading,
    } = useDeliveryRestrictionsContext();

    return (
        <div
            className={cx(CLASS_NAME, className)}
            data-testid={testId || CLASS_NAME}
        >
            <SectionTitle
                title={$t(`${INTL_PREFIX}.delivery`)}
                productId={product.productId}
                section="View Delivery Restrictions"
                isRevision={false}
                submissionType={submissionType}
                onFingerprintRulesUpdated={onFingerprintRulesUpdated}
            />
            <Section>
                <Page>
                    <div className="header">
                        <h3>{$t(`${INTL_PREFIX}.deliveryRestrictions`)}</h3>
                        <Page.Nav
                            className="tabs"
                            items={[
                                {
                                    key: SERVICE,
                                    label: (
                                        <span className="tabName">
                                            {$t(
                                                `${INTL_PREFIX}.serviceRestrictions`
                                            )}
                                        </span>
                                    ),
                                },
                                {
                                    key: COUNTRY,
                                    label: (
                                        <span className="tabName">
                                            {$t(
                                                `${INTL_PREFIX}.countryRestrictions`
                                            )}
                                        </span>
                                    ),
                                },
                                {
                                    key: COUNTRY_SERVICE,
                                    label: (
                                        <span className="tabName">
                                            {$t(
                                                `${INTL_PREFIX}.countryByService`
                                            )}
                                        </span>
                                    ),
                                },
                            ]}
                        />
                    </div>
                    <Page.Body
                        views={{
                            [SERVICE]: () => (
                                <ServiceRestrictions
                                    className={SUBGROUP_CLASS_NAME}
                                    deliveryRestrictions={stores}
                                    isLoading={storesLoading}
                                />
                            ),
                            [COUNTRY]: () => (
                                <CountryRestrictions
                                    className={SUBGROUP_CLASS_NAME}
                                    territoryDeliveryRestrictions={territories}
                                    isLoading={territoriesLoading}
                                />
                            ),
                            [COUNTRY_SERVICE]: () => (
                                <CountryXServicePairing
                                    className={SUBGROUP_CLASS_NAME}
                                    isLoading={storeTerritoriesLoading}
                                    countryXServiceRestrictions={
                                        storeTerritories
                                    }
                                />
                            ),
                        }}
                    />
                </Page>
            </Section>
        </div>
    );
};

const ProductViewDeliveryRestrictions: FC<Props> = props => (
    <DeliveryRestrictionsProvider productId={props.product.productId}>
        <ProductViewDeliveryRestrictionsContent {...props} />
    </DeliveryRestrictionsProvider>
);

export default ProductViewDeliveryRestrictions;