import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

mobiscroll.settings = {
    lang: ' ',
    theme: ' ',
    themeVariant: ' '
};

class App extends React.Component {
    validateDUS = (event, inst) => {
        if (inst.isVisible()) {
            // Display the formatted value
            inst._markup[0].querySelector('.mbsc-np-dsp').innerHTML = inst.settings.formatValue(event.values, event.variables, inst) || ' ';
        }

        return {
            // Set the set button invalid until 10 chars filled
            invalid: event.values.length != 10
        };
    }
    
    formatValueDUS = (numbers, variables, inst) => {
        // Specify how the value will be formatted
        return (numbers.length > 2 ? '(' : '') + numbers.slice(0, 3).join('') + (numbers.length > 2 ? ') ' : '') + numbers.slice(3, 6).join('') + (numbers.length > 5 ? '-' : '') + numbers.slice(6, 10).join('');
    }
    
    parseValueDUS = (v, i) => {
        if (v) {
            return v.replace('(', '').replace(') ', '').replace('-', '');
        }
    }
    
    validateIUS = (event, inst) => {
        if (inst.isVisible()) {
            inst._markup[0].querySelector('.mbsc-np-dsp').innerHTML = inst.settings.formatValue(event.values, event.variables, inst) || ' ';
        }

        return {
            invalid: event.values.length != 10
        };
    }
    
    formatValueIUS = (numbers, variables, inst) => {
        return '+1-' + numbers.slice(0, 3).join('') + (numbers.length > 2 ? '-' : '') + numbers.slice(3, 6).join('') + (numbers.length > 5 ? '-' : '') + numbers.slice(6, 10).join('');
    }
    
    parseValueIUS = (v, i) => {
        if (v) {
            return v.replace('+1', '').replace(/-/gm, '');;
        }
    }
    
    validateIGE = (event, inst) => {
        if (inst.isVisible()) {
            inst._markup[0].querySelector('.mbsc-np-dsp').innerHTML = inst.settings.formatValue(event.values, event.variables, inst) || ' ';
        }

        return {
            invalid: event.values.length != 10
        };
    }
    
    formatValueIGE = (numbers, variables, inst) => {
        return '+49-' + numbers.slice(0, 2).join('') + (numbers.length > 1 ? '-' : '') + numbers.slice(2, 5).join('') + (numbers.length > 4 ? '-' : '') + numbers.slice(5, 10).join('');
    }
    
    parseValueIGE = (v, i) => {
        if (v) {
            return v.replace('+49', '').replace(/-/gm, '');
        }
    }
    
    render() {
        return (
            <mobiscroll.Form>
                <mobiscroll.Numpad
                    fill="ltr"
                    template="(ddd) ddd-dddd"
                    allowLeadingZero={true}
                    validate={this.validateDUS}
                    formatValue={this.formatValueDUS}
                    parseValue={this.parseValueDUS}
                >
                    <mobiscroll.Input inputStyle="box" labelStyle="stacked" placeholder="Please Select...">Domestic US</mobiscroll.Input>
                </mobiscroll.Numpad>
                <mobiscroll.Numpad
                    fill="ltr"
                    template="+1-ddd-ddd-dddd"
                    allowLeadingZero={true}
                    validate={this.validateIUS}
                    formatValue={this.formatValueIUS}
                    parseValue={this.parseValueIUS}
                >
                    <mobiscroll.Input inputStyle="box" labelStyle="stacked" placeholder="Please Select...">International US</mobiscroll.Input>
                </mobiscroll.Numpad>
                <mobiscroll.Numpad
                    fill="ltr"
                    template="+49-dd-ddd-ddddd"
                    allowLeadingZero={true}
                    validate={this.validateIGE}
                    formatValue={this.formatValueIGE}
                    parseValue={this.parseValueIGE}
                >
                    <mobiscroll.Input inputStyle="box" labelStyle="stacked" placeholder="Please Select...">International German</mobiscroll.Input>
                </mobiscroll.Numpad>
            </mobiscroll.Form>
        );
    }    
}