class RegisterWithAmazon extends VueComponent
{
    /**
     * Configures script objects.
     *
     * @author Evan D Shaw <evandanielshaw@gmail.com>
     * @return void
     */
    public function init() {
        add_action('wp_enqueue_scripts', function () {
            // styles
            $semantic = new Semantic();
            $semantic->loadCheckboxCss();
            $semantic->loadFormCss();
            $semantic->loadSemanticJS();
        });
    }

    /**
     * Returns component name as is recognized by Vue.
     *
     * @author Evan D Shaw <evandanielshaw@gmail.com>
     * @return string
     */
    public function getComponentName() {
        return 'registerWithAmazonComponent';
    }

    /**
     * Displays new member registration checkbox and terms and conditions
     * if applicable
     *
     * @author Evan D Shaw <evandanielshaw@gmail.com>
     * @global \usc_e_shop $usces
     * @return void
     */
    public function template() {
        global $usces;

        $this->agree_member = isset($usces->options['agree_member']) && 'activate' === $usces->options['agree_member'];
        $noncekey = 'post_member' . $usces->get_uscesid(false);
        $nonce = wp_create_nonce($noncekey);
        $propsAndEvents = [];
        if ($this->controlledComponent === true) {
            $propsAndEvents[] = '@update-payload="updatePayload"';
            $propsAndEvents[] = '@delete-from-payload="deleteFromPayload"';
        }
        $allPropsAndEvents = join(' ', $propsAndEvents);

        ?>
        <register-with-amazon-component
            inline-template
            wcnonce="<?php echo $nonce; ?>"
            <?php echo $allPropsAndEvents; ?>
        >
            <div v-cloak>
                <div class="newmember-comp">
                    <div id="regcheckbox" class="ui checkbox regcheckbox">
                        <input v-model="regnewmember" type="checkbox" id="regnewmember" class="hidden">
                        <label for="regnewmember">
                            <?php _e('Register as a new member', 'wcexaap'); ?>
                        </label>
                    </div>
                    <?php
                    /**
                     * Fires between the checkbox and terms and conditions textarea displayed on the Quickpay page
                     *
                     * @param \Aivec\Welcart\SettlementModules\AmazonPay\Components\RegisterWithAmazon\RegisterWithAmazon $instance
                     */
                    do_action('wcexaap_checkout_review_after_register_checkbox', $this);
                    ?>
                    <?php if ($this->agree_member === true) : ?>
                        <div class="ui small form">
                            <?php echo $this->termsAndConditions(); ?>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </register-with-amazon-component>
        <?php
    }

    /**
     * If set, displays checkbox with terms and conditions for becoming a member.
     *
     * @author Evan D Shaw <evandanielshaw@gmail.com>
     * @global \usc_e_shop $usces
     * @return string
     */
    public function termsAndConditions() {
        global $usces;

        $html = '';
        ob_start();
        ?>
        <div v-if="showterms" class="field agree-member-box">
            <?php if (isset($usces->options['member_page_data']['agree_member_exp'])) : ?>
                <label>
                    <?php echo $usces->options['member_page_data']['agree_member_exp']; ?>
                </label>
            <?php endif; ?>
            <?php if (isset($usces->options['member_page_data']['agree_member_cont'])) : ?>
                <textarea
                    name="at_cont_text"
                    class="at_cont_text"
                    readonly="readonly"><?php echo $usces->options['member_page_data']['agree_member_cont']; ?>
                </textarea>
                <div class="at_check_area">
                    <div class="ui checkbox">
                        <input
                            v-model="agree_member_check"
                            name="aap_agree_member_check"
                            id="aap_agree_member_check"
                            type="checkbox"
                        >
                        <label
                            for="aap_agree_member_check"
                            style="cursor:pointer;"
                        >
                            <?php _e('Accept the membership agreement', 'usces'); ?>
                        </label>
                    </div>
                </div>
            <?php endif; ?>
        </div>
        <?php
        $html = ob_get_clean();
        /**
         * Filters HTML of the terms and conditions shown on the Quickpay page
         *
         * @param string $html
         * @param bool   $agree_member
         */
        $html = apply_filters('wcexaap_filter_agree_field', $html, $this->agree_member);

        return $html;
    }
}