import { Button } from '@theorchard/suite-components';
import { Illustration } from '@theorchard/suite-icons';
import React, { useState } from 'react';
import OAPanel from 'shared/components/oaPanel';
import UpdatedAddRule from 'src/components/fingerprintRulesOAPanel/updatedAddRule';
import {
    useSetFingerprintRulesForSubaccountMutation,
    useSetFingerprintRulesForVendorMutation,
} from 'src/data/mutations';
import DeliveryRights from './deliveryRights/delivery-rights';
import DeliveryRules from './deliveryRules';
import {
    POLICY_OPTIONS,
    SERVICE_OPTIONS,
} from './deliveryRules/delivery-rules';
import type { FC } from 'react';
import type {
    AccountFingerprintRules,
    FingerprintRuleInput,
    Territory,
} from 'src/types';
import type { Policy } from './deliveryRights/deliveryRightsModal/delivery-rights-modal';

export const TIKTOK_KEY = 'tiktok';
export const YOUTUBE_KEY = 'youtube';

export interface FingerprintRulesOAPanelProps {
    rules: AccountFingerprintRules | undefined;
    territories: Territory[] | undefined;
    debug?: boolean;
    loading: boolean;
    error: boolean;
    canManageRules: boolean;
}

export interface ServiceFilter {
    value: string;
    label: string;
}

export interface PolicyFilter {
    value: string;
    label: string;
}

export const CLASS_NAME = 'FingerprintRulesOAPanel';

export const FingerprintRulesOAPanel: FC<FingerprintRulesOAPanelProps> = ({
    rules,
    territories,
    debug = false,
    loading,
    error,
    canManageRules = false,
}) => {
    const [territoriesFilter, setTerritoriesFilter] = useState<string[]>([]);
    const [policiesFilter, setPoliciesFilter] = useState<PolicyFilter>();
    const [servicesFilter, setServicesFilter] = useState<
        ServiceFilter[] | undefined
    >();
    const [openSidecar, setOpenSidecar] = useState(false);
    const [
        updateSubaccountRulesMutation,
        { loading: subaccountMutationLoading },
    ] = useSetFingerprintRulesForSubaccountMutation();
    const [updateVendorRulesMutation, { loading: vendorMutationLoading }] =
        useSetFingerprintRulesForVendorMutation();

    const isSavingRules = vendorMutationLoading || subaccountMutationLoading;

    const closeSidecar = () => {
        setOpenSidecar(false);
    };

    const renderEmptyState = () => {
        return (
            <div className={`${CLASS_NAME}-empty-state`}>
                <Illustration
                    name="emptyState"
                    className={`${CLASS_NAME}-img`}
                />
                <div className={`${CLASS_NAME}-empty-state-title`}>
                    <p>
                        {$t(
                            'fingerprintRules.fingerprintRulesOaPanel.emptyState.title'
                        )}
                    </p>
                </div>
                <div className={`${CLASS_NAME}-empty-state-info`}>
                    <p>
                        {$t(
                            'fingerprintRules.fingerprintRulesOaPanel.emptyState.info'
                        )}
                    </p>
                </div>
                {canManageRules && (
                    <div className={`${CLASS_NAME}-empty-state-button`}>
                        <Button
                            onClick={() => setOpenSidecar(true)}
                            variant="primary"
                            size="lg"
                            disabled={isSavingRules}
                        >
                            {$t(
                                'fingerprintRules.fingerprintRulesOaPanel.emptyState.button'
                            )}
                        </Button>
                    </div>
                )}
                {canManageRules && (
                    <UpdatedAddRule
                        title={$t(
                            'fingerprintRules.fingerprintRulesOaPanel.sidecar.title'
                        )}
                        isOpen={openSidecar}
                        onClose={closeSidecar}
                        onConfirm={handleSaveRule}
                        higherLevelRules={
                            accountType === 'Vendor' ? [] : vendorRules
                        }
                        currentRules={
                            accountType === 'Vendor'
                                ? vendorRules
                                : subaccountRules
                        }
                        territories={territories}
                        showSetUpSelection
                    />
                )}
            </div>
        );
    };

    const onRightsCountryChange = (event: Policy) => {
        const { countries, type, service } = event;

        const foundStarTerritory = countries.find(country => country === '*');
        const foundPolicy = POLICY_OPTIONS.find(
            option => option.label === type
        );
        const foundService = SERVICE_OPTIONS.find(
            option => option.label === service
        );
        if (foundStarTerritory) {
            setTerritoriesFilter([]);
            if (foundPolicy) setPoliciesFilter(foundPolicy);
            if (foundService) setServicesFilter([foundService]);
        } else {
            setTerritoriesFilter(countries);
            if (foundPolicy) setPoliciesFilter(foundPolicy);
            if (foundService) setServicesFilter([foundService]);
        }
        document
            .querySelector(`#FingerprintRulesOAPanel-rules-scroll-to`)
            ?.scrollIntoView({
                behavior: 'smooth',
                block: 'center',
            });
    };

    const handleSaveRule = (rules: FingerprintRuleInput[]) => {
        if (accountType === 'Vendor') {
            updateVendorRulesMutation({
                variables: {
                    id: String(accountId),
                    rules: JSON.parse(JSON.stringify(rules)),
                },
            });
        } else {
            updateSubaccountRulesMutation({
                variables: {
                    id: String(accountId),
                    rules: JSON.parse(JSON.stringify(rules)),
                },
            });
        }
        closeSidecar();
    };

    if (error) return <p>ERROR</p>;

    if (loading && !rules)
        return (
            <OAPanel
                title={$t(
                    'fingerprintRules.fingerprintRulesOaPanel.deliveryRulesTitle'
                )}
                editable
                debug={debug}
                loading={loading}
            >
                <div></div>
            </OAPanel>
        );

    if (!rules)
        return (
            <OAPanel
                title={$t(
                    'fingerprintRules.fingerprintRulesOaPanel.deliveryRulesTitle'
                )}
                editable
                debug={debug}
                loading={loading}
                error={error}
            >
                <div></div>
            </OAPanel>
        );

    const { accountType, accountId, vendorRules, subaccountRules } = rules;

    if (accountType === 'Vendor' && vendorRules.length === 0)
        return (
            <OAPanel
                title={$t(
                    'fingerprintRules.fingerprintRulesOaPanel.deliveryRulesTitle'
                )}
                editable
                debug={debug}
                loading={loading}
                error={error}
            >
                {renderEmptyState()}
            </OAPanel>
        );
    if (
        accountType === 'Subaccount' &&
        subaccountRules.length === 0 &&
        vendorRules.length === 0
    )
        return (
            <OAPanel
                title={$t(
                    'fingerprintRules.fingerprintRulesOaPanel.deliveryRulesTitle'
                )}
                editable
                debug={debug}
                loading={loading}
                error={error}
            >
                {renderEmptyState()}
            </OAPanel>
        );

    return (
        <div>
            <OAPanel
                title={$t(
                    'fingerprintRules.fingerprintRulesOaPanel.deliveryRightsTitle'
                )}
                editable
                debug={debug}
                loading={loading}
                error={error}
            >
                <DeliveryRights
                    rules={rules}
                    territories={territories}
                    onCountryChange={onRightsCountryChange}
                />
            </OAPanel>
            <OAPanel
                title={$t(
                    'fingerprintRules.fingerprintRulesOaPanel.deliveryRulesTitle'
                )}
                editable
                debug={debug}
                loading={loading}
                error={error}
            >
                <div
                    className={`${CLASS_NAME}-rules`}
                    id={`${CLASS_NAME}-rules-scroll-to`}
                >
                    <DeliveryRules
                        rules={rules}
                        territories={territories}
                        territoriesFilter={territoriesFilter}
                        policiesFilter={policiesFilter}
                        servicesFilter={servicesFilter}
                        editable={canManageRules}
                    />
                </div>
            </OAPanel>
        </div>
    );
};