import type { FC } from 'react';
import React, { useEffect, useState } from 'react';
import {
    Button,
    FullscreenModal,
    useToast,
} from '@theorchard/suite-components';
import { Page } from '@theorchard/suite-frontend';
import './productEditModal.scss';
import { useHistory } from 'react-router-dom';
import { useDeliveryRestrictionsContext } from 'src/components/deliveryRestrictionsContext/useDeliveryRestrictionsContext';
import { ROUTE_REVIEW_QUEUE } from 'src/constants';
import { useSetFingerprintRulesForTrackBulkMutation } from 'src/data/mutations/setFingerprintRulesForTrackBulk/setFingerprintRulesForTrackBulk';
import { useUpdateProductDeliveryRestrictionsMutation } from 'src/data/mutations/updateDeliveryRestrictions';
import { useProductQuery } from 'src/data/queries';
import {
    formatCountries,
    formatServiceCountries,
    formatServices,
} from 'src/pages/productEditModal/components/helpers/formatters';
import productEditDelivery from 'src/pages/productEditModal/components/productEditDelivery';
import { MergedProduct } from 'src/product/product';
import ProductHeader from './components/productHeader';
import type { FingerprintRulesResult, SubmissionType, Track } from 'src/types';

export const CLASS_NAME = 'ProductEditModal';
export const INTL_PREFIX = 'contentReview.productEditModal';

interface Props {
    productId: number;
    onSave?: (fpRulesResult?: FingerprintRulesResult) => void;
    onCancel?: () => void;
    submissionType?: SubmissionType;
}

const ProductEditModal: FC<Props> = ({
    productId,
    onCancel,
    onSave,
    submissionType,
}) => {
    const toast = useToast();
    const history = useHistory();
    const [fpRestrictions, setFpRestrictions] = useState<Track[]>([]);
    const {
        stores,
        territories,
        storeTerritoryGroups,
        isChanged: isDeliveryRestrictionsChanged,
    } = useDeliveryRestrictionsContext();

    const views = { delivery: productEditDelivery };

    const moveToPreviousUrl = () => {
        if (window.history.length > 1) {
            window.history.back();
        } else {
            history.push(ROUTE_REVIEW_QUEUE);
        }
    };

    useEffect(() => {
        const moveToDigitalAudioUrl = (productId: number | string) => {
            if (window.location.href.includes('digital-audio')) return;
            const url = new URL(window.location.href.split('?')[0]);
            url.pathname = '/catalog/digital-audio/' + productId;
            url.searchParams.set('tab', 'delivery');

            window.history.pushState(null, '', url.toString());
        };
        moveToDigitalAudioUrl(productId);
    }, [productId]);

    const { data: product } = useProductQuery(Number(productId));
    const [updateTrackRulesMutation] =
        useSetFingerprintRulesForTrackBulkMutation();
    const updateDeliveryRestrictionsMutation =
        useUpdateProductDeliveryRestrictionsMutation(Number(productId));

    if (!product) {
        return <div />;
    }

    const items = [
        {
            label: $t(`digitalProducts.trackPage.views.deliveryName`),
            key: 'delivery',
        },
    ];

    const saveDeliveryRestrictions = async () => {
        const services = formatServices(stores);
        const countries = formatCountries(territories);
        const serviceCountries = formatServiceCountries(storeTerritoryGroups);

        return await updateDeliveryRestrictionsMutation({
            services,
            countries,
            serviceCountries,
        });
    };

    const onFingerprintRulesUpdated = (tracks: Track[]) => {
        setFpRestrictions(tracks);
    };

    const handleCancel = () => {
        moveToPreviousUrl();
        if (onCancel) {
            onCancel();
        }
    };

    const handleSave = async () => {
        let result;

        if (isDeliveryRestrictionsChanged) await saveDeliveryRestrictions();

        if (fpRestrictions.length) {
            const input = fpRestrictions.map(t => ({
                id: t.tuid,
                rules: t.rules.map(c => ({
                    policy: c.policy,
                    service: c.service,
                    territory: c.territory,
                    start: null,
                    end: null,
                })),
            }));
            try {
                result = await updateTrackRulesMutation({
                    variables: { input },
                });
            } catch (error) {
                toast(
                    $t('contentReview.addFingerprintRestriction.unableToSave'),
                    {
                        variant: 'error',
                    }
                );
            }
        }
        moveToPreviousUrl();
        onSave?.(result?.data?.setFingerprintRulesForTrackBulk);
    };

    const mergedProduct = new MergedProduct(product, null, null);
    return (
        <FullscreenModal className={`${CLASS_NAME}`}>
            <FullscreenModal.Header>
                <div className={`${CLASS_NAME}-buttons`}>
                    <Button
                        size="lg"
                        onClick={handleCancel}
                        variant="tertiary"
                        className={`${CLASS_NAME}-button-cancel`}
                        data-testid={`${CLASS_NAME}-button-cancel`}
                    >
                        {$t('common.cancel')}
                    </Button>
                    <Button
                        onClick={handleSave}
                        variant="primary"
                        size="lg"
                        data-testid={`${CLASS_NAME}-button-save`}
                    >
                        {$t('common.save')}
                    </Button>
                </div>
            </FullscreenModal.Header>
            <FullscreenModal.Body>
                <ProductHeader
                    mergedProduct={mergedProduct}
                    submissionType={submissionType}
                />
                <Page.Nav items={items} />
                <Page.Body
                    views={views}
                    props={{ productId, onFingerprintRulesUpdated }}
                />
            </FullscreenModal.Body>
        </FullscreenModal>
    );
};

export default ProductEditModal;