/* global wp, wc, window */
(function() {
    // Ensure Blocks registry and settings are available
    var registry = (wc && wc.blocksRegistry) ? wc.blocksRegistry : null;
    var settingsAPI = (window.wcSettings && window.wcSettings.getSetting) ? window.wcSettings : null;
    var i18n = (wp && wp.i18n) ? wp.i18n : null;
    var element = (wp && wp.element) ? wp.element : null;

    if (!registry || !settingsAPI || !element) {
        return;
    }

    var __ = i18n ? i18n.__ : function(s){ return s; };
    var React = element;

    var pmData = settingsAPI.getSetting('yooneMonerisData', {});
    var label  = pmData.title || __('Credit Card (Moneris)', 'yoone-moneris');

    var Content = function(props) {
        var el = React.createElement;
        var useState = React.useState, useEffect = React.useEffect;

        var _a = useState(''), number = _a[0], setNumber = _a[1];
        var _b = useState(''), expiry = _b[0], setExpiry = _b[1];
        var _c = useState(''), cvc = _c[0], setCvc = _c[1];

        useEffect(function() {
            var unsubscribe = props.eventRegistration.onPaymentProcessing(function() {
                var parts = (expiry || '').split('/');
                var m = parts[0] ? parts[0].trim() : '';
                var y = parts[1] ? parts[1].trim() : '';
                if (y && y.length === 2) { y = '20' + y; }
                return {
                    type: 'success',
                    meta: {
                        paymentMethodData: {
                            yoone_moneris: {
                                number: String(number || ''),
                                exp_month: String(m || ''),
                                exp_year: String(y || ''),
                                cvc: String(cvc || ''),
                            }
                        }
                    }
                };
            });
            return function() { unsubscribe(); };
        }, [number, expiry, cvc]);

        return el('div', { className: 'yoone-moneris-blocks-fields' }, [
            el('div', { className: 'yoone-moneris-field' }, [
                el('label', {}, __('Card Number', 'yoone-moneris')),
                el('input', {
                    type: 'text',
                    inputMode: 'numeric',
                    autoComplete: 'cc-number',
                    value: number,
                    onChange: function(e){ setNumber(e.target.value); },
                    placeholder: '4111111111111111'
                })
            ]),
            el('div', { className: 'yoone-moneris-field' }, [
                el('label', {}, __('Expiry (MM/YY)', 'yoone-moneris')),
                el('input', {
                    type: 'text',
                    inputMode: 'numeric',
                    autoComplete: 'cc-exp',
                    value: expiry,
                    onChange: function(e){ setExpiry(e.target.value); },
                    placeholder: 'MM/YY'
                })
            ]),
            el('div', { className: 'yoone-moneris-field' }, [
                el('label', {}, __('CVC', 'yoone-moneris')),
                el('input', {
                    type: 'text',
                    inputMode: 'numeric',
                    autoComplete: 'cc-csc',
                    value: cvc,
                    onChange: function(e){ setCvc(e.target.value); },
                    placeholder: '123'
                })
            ])
        ]);
    };

    registry.registerPaymentMethod({
        name: 'yoone_moneris',
        label: label,
        ariaLabel: label,
        content: Content,
        edit: Content,
        canMakePayment: function() {
            return !! pmData.enabled;
        },
        supports: {
            features: ['products']
        }
    });
})();