import '@easy-wizzy/retailrocket-common/index.css';
import '@easy-wizzy/core/index.css';

import { createApi as createTriggerPostTransactionWysiwygTemplateEditorClient } from '@retailrocket/retailrocket.wysiwyg.bff.v3.apiclients.triggerposttransactionwysiwygtemplateeditor';
import { createApp } from 'vue';
import {
    createSimpleDataForm,
    WysiwygApp
} from '@easy-wizzy/core';
import {
    saveButtonAppStateManagerPluginFactory,
    createVuetifyPlugin,
    wysiwygAppDepsFactory,
    apiMachineFetchFactory,
    saveTemplateButtonDepsFactory
} from '@easy-wizzy/retailrocket-impl-common';
import type {
    EmailTemplateType,
    LocaleKey
} from '@easy-wizzy/core';
import { postTransactionWysiwygTemplateEditorDepsFactory } from '@easy-wizzy/retailrocket-impl-post-transaction';
import type {
    PostTransactionListExpressionDataSource,
    PostTransactionNumberExpressionDataSource,
    PostTransactionStringExpressionDataSource
} from '@easy-wizzy/retailrocket-post-transaction';

const appTagId = '#app';
const appTag = document.querySelector(appTagId);

const params = {
    partnerId: appTag!.getAttribute('data-partner-id')!,
    wysiwygBffProxyBaseUrl: appTag!.getAttribute('data-wysiwyg-bff-proxy-base-url')!,
    wysiwygTemplateEditorBffBaseUrl: appTag!.getAttribute('data-wysiwyg-template-editor-bff-base-url')!,
    antiForgeryHeaderTokenName: appTag!.getAttribute('data-anti-forgery-header-token-name')!,
    antiForgeryHeaderTokenValue: appTag!.getAttribute('data-anti-forgery-header-token-value')!,
    antiForgeryFormTokenName: appTag!.getAttribute('data-anti-forgery-form-token-name')!,
    antiForgeryFormTokenValue: appTag!.getAttribute('data-anti-forgery-form-token-value')!,
    productImageResizerUrl: appTag!.getAttribute('data-product-image-resizer-url')!,
    emailTemplateJson: appTag!.getAttribute('data-email-template-json')!,
    resetTemplateFormUrl: appTag!.getAttribute('data-reset-template-form-url')!,
    exitLink: appTag!.getAttribute('data-exit-link')!,
    localeKey: appTag!.getAttribute('data-locale-key') as LocaleKey || 'en'
};

const resetTemplate = (): void => {
    const formData = new FormData();
    formData.append(
        params.antiForgeryFormTokenName,
        params.antiForgeryFormTokenValue);

    const form = createSimpleDataForm({
        method: 'POST',
        action: params.resetTemplateFormUrl,
        formData: formData
    });

    document.body.appendChild(form);
    form.submit();
};

const postTransactionMainPageBffClient = createTriggerPostTransactionWysiwygTemplateEditorClient(
    apiMachineFetchFactory({
        baseUrl: params.wysiwygTemplateEditorBffBaseUrl,
        antiForgeryTokenHeaderName: params.antiForgeryHeaderTokenName,
        antiForgeryTokenValue: params.antiForgeryHeaderTokenValue
    })
);

const app = createApp(
    WysiwygApp,
    {
        deps: wysiwygAppDepsFactory({
            localeKey: params.localeKey,
            wysiwygTemplateEditorDeps: postTransactionWysiwygTemplateEditorDepsFactory({
                partnerId: params.partnerId,
                localeKey: params.localeKey,
                contactCustomData: {},
                nextCouponFromBatch: { BatchId: '' },
                productImageResizerUrl: params.productImageResizerUrl,
                antiForgeryHeaderTokenName: params.antiForgeryHeaderTokenName,
                antiForgeryHeaderTokenValue: params.antiForgeryHeaderTokenValue,
                emailTemplateJson: params.emailTemplateJson,
                wysiwygBffProxyBaseUrl: params.wysiwygBffProxyBaseUrl,
                wysiwygTemplateEditorBffBaseUrl: params.wysiwygTemplateEditorBffBaseUrl,
                imageGalleryPlugin: null,
                appStateManagerPlugin: saveButtonAppStateManagerPluginFactory<
                    PostTransactionListExpressionDataSource,
                    PostTransactionNumberExpressionDataSource,
                    PostTransactionStringExpressionDataSource
                >({
                    deps: saveTemplateButtonDepsFactory({
                        localeKey: params.localeKey,
                        saveEmailTemplate: async (arg: {
                            emailTemplate: EmailTemplateType<
                                PostTransactionListExpressionDataSource,
                                PostTransactionNumberExpressionDataSource,
                                PostTransactionStringExpressionDataSource
                            >
                        }): Promise<'Success' | 'Fail'> => {
                            const result = await postTransactionMainPageBffClient
                                .postSaveTemplate({
                                    body: {
                                        partnerId: params.partnerId,
                                        templateJson: JSON.stringify(arg.emailTemplate)
                                    }
                                })
                                .catch(() => {
                                    return Promise.reject('Fail');
                                });

                            return result.status === 200
                                ? 'Success'
                                : 'Fail';
                        }
                    })
                })
            })
        }),
        onReturnToTemplateSelection: () => {
            resetTemplate();
        },
        onExit: () => {
            window.location.href = params.exitLink;
        }
    }
);

app.use(createVuetifyPlugin);

app.mount(appTagId);