class PointsForm extends VueComponent
{
    /**
     * Loads CSS
     *
     * @author Evan D Shaw <evandanielshaw@gmail.com>
     * @return void
     */
    public function init() {
        add_action('wp_enqueue_scripts', function () {
            (new Semantic())->loadButtonCss();
        });
    }

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

    /**
     * Points form component template.
     *
     * @author Evan D Shaw <evandanielshaw@gmail.com>
     * @global array $usces_members
     * @global array $usces_entries
     * @return void
     */
    public function template() {
        global $usces_members, $usces_entries;

        $propsAndEvents = [];
        if ($this->controlledComponent === true) {
            $propsAndEvents[] = 'v-bind:loading-prop="loading"';
            $propsAndEvents[] = 'v-bind:purchase-payload="purchasePayload"';
            $propsAndEvents[] = '@update-payload="updatePayload"';
            $propsAndEvents[] = '@update-order="updateOrder"';
            $propsAndEvents[] = '@update-loading="updateLoading"';
        }

        $allPropsAndEvents = join(' ', $propsAndEvents);
        /**
         * Filters the button CSS class of the `points-form-component` Vue component shown on the Quickpay page
         *
         * @important
         * @param string $btnclass
         */
        $btnclass = apply_filters(
            'wcexaap_filter_checkout_review_points_form_button_class',
            'ui ' . AmazonPay::getThemeConfig()['btnprimary'] . ' basic button'
        );
        ?>
        <points-form-component
            v-bind:usedpoint-session-val="<?php echo (int)esc_html($usces_entries['order']['usedpoint']); ?>"
            <?php echo $allPropsAndEvents; ?>
            inline-template
        >
            <?php ob_start(); ?>
            <div>
                <div v-cloak v-if="errorMessage" class="error_message" v-html="errorMessage"></div>
                <?php ob_start(); ?>
                <table cellspacing="0" id="point_table">
                    <tr>
                        <td class="c-point"><?php echo esc_html__('The current point', 'usces'); ?></td>
                        <td><span class="point"><?php echo $usces_members['point']; ?></span>pt</td>
                    </tr>
                    <tr>
                        <td class="u-point"><?php echo esc_html__('Points you are using here', 'usces'); ?></td>
                        <td>
                            <input
                                name="offer[usedpoint]"
                                class="used_point"
                                type="text"
                                v-model="usedpoints"
                            />
                            pt
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="point-btn">
                            <?php ob_start(); ?>
                            <button
                                v-on:click.stop.prevent="usePoints"
                                class="<?php echo esc_attr($btnclass); ?>"
                                v-bind:class="{ disabled: loading }"
                                name="use_point"
                            >
                                <?php esc_html_e('Use the points', 'usces'); ?>
                            </button>
                            <?php
                            $buttonhtml = ob_get_clean();
                            /**
                             * Filters the button HTML of the `points-form-component` Vue component shown on
                             * the Quickpay page
                             *
                             * @param string $buttonhtml
                             * @param string $btnclass See {@see 'wcexaap_filter_checkout_review_points_form_button_class'}
                             */
                            echo apply_filters(
                                'wcexaap_checkout_review_filter_points_form_button_html',
                                $buttonhtml,
                                $btnclass
                            );
                            ?>
                        </td>
                    </tr>
                </table>
                <?php
                $tablehtml = ob_get_clean();
                /**
                 * Filters the table HTML of the `points-form-component` Vue component shown on
                 * the Quickpay page
                 *
                 * @param string $tablehtml
                 * @param string $btnclass See {@see 'wcexaap_filter_checkout_review_points_form_button_class'}
                 */
                echo apply_filters('wcexaap_checkout_review_filter_points_table', $tablehtml, $btnclass);

                /**
                 * Mirrored Welcart action hook
                 *
                 * @ignore
                 */
                do_action('usces_action_confirm_page_point_inform');
                ?>
            </div>
            <?php
            $vuehtml = ob_get_clean();
            /**
             * Filters all HTML of the `points-form-component` Vue component shown on the Quickpay page
             *
             * @param string $vuehtml
             * @param string $btnclass See {@see 'wcexaap_filter_checkout_review_points_form_button_class'}
             */
            echo apply_filters('wcexaap_checkout_review_filter_points_form', $vuehtml, $btnclass);
            ?>
        </points-form-component>
        <?php
    }
}