class LinkMembersToAmazon extends VueComponent
{
    /**
     * Configures script objects.
     *
     * @author Kubo Tatsuya <k.tatsuya0419@gmail.com>
     * @return void
     */
    public function init() {
        add_action('wp_enqueue_scripts', function () {
            // styles
            (new Semantic())->loadCheckboxCss();
        });
    }

    /**
     * Returns component name as is recognized by Vue.
     *
     * @author Kubo Tatsuya <k.tatsuya0419@gmail.com>
     * @return string
     */
    public function getComponentName() {
        return 'linkMembersToAmazonComponent';
    }

    /**
     * Display a checkbox to link member information and Amazon account
     *
     * @author Kubo Tatsuya <k.tatsuya0419@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'];
        $propsAndEvents = [];
        if ($this->controlledComponent === true) {
            $propsAndEvents[] = '@update-payload="updatePayload"';
            $propsAndEvents[] = '@delete-from-payload="deleteFromPayload"';
        }
        $allPropsAndEvents = join(' ', $propsAndEvents);

        ?>
        <link-members-to-amazon-component
            inline-template
            <?php echo $allPropsAndEvents; ?>
        >
            <div v-cloak>
                <div class="linkmember-comp">
                    <div class="ui checkbox linkcheckbox">
                        <input v-model="linkmember" type="checkbox" id="linkmember" class="hidden">
                        <label for="linkmember">
                            <?php _e('Link members with Amazon accounts', 'wcexaap'); ?>
                        </label>
                    </div>
                </div>
                <div v-if="linkmember" class="ui warning message autologin-info">
                    <p><?php _e('By selecting it, you can log in with your Amazon account from the next time.', 'wcexaap'); ?></p>
                </div>
                <?php
                /**
                 * Fires at the end of the `link-members-to-amazon-component` shown on the member page
                 *
                 * @param \Aivec\Welcart\SettlementModules\AmazonPay\Components\LinkMembersToAmazon\LinkMembersToAmazon $instance
                 */
                do_action('wcexaap_checkout_review_after_linkmember_checkbox', $this);
                ?>
            </div>
        </link-members-to-amazon-component>
        <?php
    }
}