class IPNEndpointRegistration
{

    const COMP_JS_SLUG = 'wcexaap-ipn-endpoint-registration-component';

    /**
     * AmazonPay module instance
     *
     * @var AmazonPay
     */
    public $module;

    /**
     * Register hook for adding sync option field to member page
     *
     * @author Evan D Shaw <evandanielshaw@gmail.com>
     * @param AmazonPay $module
     */
    public function __construct(AmazonPay $module) {
        $this->module = $module;
    }

    /**
     * Loads Vue component and returns Vue anchor element
     *
     * @author Evan D Shaw <evandanielshaw@gmail.com>
     * @return void
     */
    public function loadComponent() {
        $opts = $this->module->getActingOpts();

        $semantic = new Semantic();
        $semantic->loadButtonCss();
        $semantic->loadLoaderCss();
        $semantic->loadIconCss();
        $semantic->loadTransitionCss();
        $semantic->loadToastCss();
        $semantic->loadSemanticJS();
        wp_enqueue_script(
            self::COMP_JS_SLUG,
            WCEXAAP_PLUGIN_URL . '/dist/ipnEndpointRegistration.js',
            [Semantic::JS_SLUG],
            WCEXAAP_VERSION,
            true
        );
        wp_set_script_translations(self::COMP_JS_SLUG, 'wcexaap', WCEXAAP_LANGDIR);
        wp_localize_script(
            self::COMP_JS_SLUG,
            AmazonPay::L10N,
            array_merge(
                $this->module->getScriptInjectionVariables(),
                [
                    'ipnEndpoint' => $opts['ipn_endpoint'],
                    'ipnRegistered' => $opts['ipn_registered'],
                ]
            )
        );
    }

    /**
     * Returns element that acts as the Vue component container
     *
     * @author Evan D Shaw <evandanielshaw@gmail.com>
     * @return string
     */
    public function getVueMountElement() {
        return '<div id="' . AmazonPay::VUE_APP_MOUNT_EL . '"></div>';
    }
}