class PurchaseButton extends VueComponent
{
    /**
     * Amazon Pay product type. `payandship` or `payonly`
     *
     * @var string
     */
    private $productType;

    /**
     * Welcart charge type. `once` or `continue`
     *
     * @var string
     */
    private $chargeType;

    /**
     * Checkout division. `welcart` or `quickpay`
     *
     * @var string
     */
    private $checkoutDivision;

    /**
     * Instantiates purchase button component
     *
     * @author Evan D Shaw <evandanielshaw@gmail.com>
     * @param string $productType
     * @param string $chargeType
     * @param string $checkoutDivision
     * @param bool   $controlledComponent Default: `true`
     * @return void
     */
    public function __construct(
        $productType,
        $chargeType,
        $checkoutDivision,
        $controlledComponent = true
    ) {
        parent::__construct($controlledComponent);
        $this->productType = strtolower($productType);
        $this->chargeType = strtolower($chargeType);
        $this->checkoutDivision = strtolower($checkoutDivision);
    }

    /**
     * Loads CSS
     *
     * @author Evan D Shaw <evandanielshaw@gmail.com>
     * @return void
     */
    public function init() {
        add_action('wp_enqueue_scripts', function () {
            // styles
            $semantic = new Semantic();
            $semantic->loadButtonCss();
            $semantic->loadDimmerCss();
            $semantic->loadLoaderCss();
        });
    }

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

    /**
     * Purchase button Vue template.
     *
     * @author Evan D Shaw <evandanielshaw@gmail.com>
     * @return void
     */
    public function template() {
        $propsAndEvents = [];
        if ($this->controlledComponent === true) {
            $propsAndEvents[] = 'v-bind:gift-shipping="giftShipping"';
            $propsAndEvents[] = 'v-bind:loading-prop="loading"';
            $propsAndEvents[] = 'v-bind:hard-errors="hardDeclineErrors"';
            $propsAndEvents[] = 'v-bind:purchase-payload="purchasePayload"';
        } else {
            $order = isset($_SESSION['usces_entry']['order']) ? $_SESSION['usces_entry']['order'] : [];
            $order = WelcartUtils::localizeAssociativeArray($order);
            $propsAndEvents[] = 'v-bind:purchase-payload=\'' . $order . '\'';
        }
        $allPropsAndEvents = join(' ', $propsAndEvents);

        $theme = AmazonPay::getThemeConfig();
        /**
         * Filters the button CSS class for the `purchase-button` Vue component shown on the Quickpay page
         * and Welcart 通常フロー 内容確認 page
         *
         * @important
         * @param string $btnclass
         */
        $btnclass = apply_filters('wcexaap_filter_purchase_button_class', 'ui ' . $theme['btnprimary'] . ' button');
        $btntype = $theme['color'] === 'red' ? 'basic' : '';
        ?>
        <purchase-button
            <?php echo $allPropsAndEvents; ?>
            checkout-division="<?php echo $this->checkoutDivision; ?>"
            product-type="<?php echo $this->productType; ?>"
            charge-type="<?php echo $this->chargeType; ?>"
            inline-template
        >
            <div>
                <?php ob_start(); ?>
                    <div class="back-or-confirm-container">
                        <div v-if="error" class="error_message" v-html="error"></div>
                        <div class="buttons">
                            <?php ob_start(); ?>
                            <a
                                class="login-backbtn ui <?php echo $btntype; ?> button"
                                href="<?php echo esc_url(USCES_CART_URL); ?>"
                            >
                                <?php
                                /**
                                 * Filters the back button text for the `purchase-button` Vue component shown on
                                 * the Quickpay page and Welcart 通常フロー 内容確認 page
                                 *
                                 * @important
                                 * @param string $text
                                 */
                                echo apply_filters(
                                    'wcexaap_filter_purchase_button_component_back_button_text',
                                    esc_html__('Back', 'usces')
                                );
                                ?>
                            </a>
                            <?php echo $this->filterBackButton(ob_get_clean(), $btntype); ?>
                            <button
                                id="purchase_button"
                                class="<?php echo esc_attr($btnclass) ?>"
                                v-bind:class="{ disabled: !canConfirm }"
                                @blur="clearErrors"
                                @click="purchase"
                            >
                                <?php
                                /**
                                 * Filters the purchase button text for the `purchase-button` Vue component shown on
                                 * the Quickpay page and Welcart 通常フロー 内容確認 page
                                 *
                                 * @important
                                 * @param string $text
                                 */
                                echo apply_filters(
                                    'wcexaap_filter_purchase_button_component_purchase_button_text',
                                    esc_html__('Confirm Purchase', 'wcexaap')
                                );
                                ?>
                            </button>
                        </div>
                    </div>
                    <div :class="{ active: processing }" class="ui medium page dimmer">
                        <div class="ui medium text loader"></div>
                    </div>
                <?php
                $vuehtml = ob_get_clean();
                /**
                 * Filters all HTML of the `purchase-button` Vue component shown on the Quickpay page
                 * and Welcart 通常フロー 内容確認 page
                 *
                 * @param string $vuehtml
                 * @param string $btnclass See {@see 'wcexaap_filter_purchase_button_class'}
                 * @param string $btntype
                 */
                echo apply_filters('wcexaap_filter_purchase_button_component', $vuehtml, $btnclass, $btntype);
                ?>
            </div>
        </purchase-button>
        <?php
    }

    /**
     * Filters the back button
     *
     * @author Evan D Shaw <evandanielshaw@gmail.com>
     * @param string $html
     * @param string $btntype
     * @return string
     */
    protected function filterBackButton($html, $btntype) {
        return $html;
    }
}