class JValidField {
    constructor(el) {
        this.Guid = el.dataset.guid;
        this.Index = parseInt(el.dataset.validIndex);
        this.Name = el.dataset.validName;
        this.OrgText = el.dataset.validOrgText;
        this.Text = el.dataset.validText;
        this.InputChar = parseInt(el.dataset.validInputChar);
        this.ShowStyle = parseInt(el.dataset.validShowStyle);
        this.ThousandFormat = el.dataset.validThousandFormat;
    }
};

/*
*画面（部品）単位のViewModel管理
*想定シナリオ
*1.C# Blazor側でViewModelにViewModel生成、GuidやValidFieldを<input>の属性にセットする
*2.OnAfterRenderAsyncのfirstRenderでInputCoreのinit(Guid)を呼出し
*3.InputCoreのinit(Guid)に、JViewModelを生成し、<input>の属性よりValidFieldを生成し、入力制御を行う
*4.C# Blazor側Page OR 部品 Dispose時に、InputCoreのdispose(Guid)を呼出し、廃棄する
*/
class JViewModel {
    constructor(guid) {
        this.Guid = guid
        this.Fields = [];
        this.FieldMap = new Map();
    }

    add(field) {
        this.Fields.push(field);
        this.FieldMap.set(field.Name, field);
    }

    static create(guid) {
        return new JViewModel(guid);
    }
};

/*
* IMEモードなし状態：
* 通常文字入力：keydown⇒keypress⇒input⇒keyup
* Enter：keydown⇒keypress⇒change(※文字変更あった場合)⇒keyup
* Tab：keydown⇒blur⇒focus(次)⇒keyup
* ※その場合、入力文字毎制限はinputに行う
* IMEモード状態：ひらがな
* 通常文字入力：compositionstart⇒複数回keydown⇒input⇒keyup⇒compositionend
* ※その場合、入力文字毎制限はcompositionendに行う
* 全部入力内容のチェックタイミングはblurで行う
* Up、End、Enterの判断はKeyUpの信頼度は一番高い、又Enterのみはkeypressでも可能です。
* 
* フォーカス移動、全部チェックのため、viewFieldsの配列が必要です。
*/
class InputCore {
    constructor() {
        this.viewModelMap = new Map();
    }

    static filter(e) {
        let index = parseInt(e.target.dataset.validIndex);
        let field = window.inputCore.viewModelMap.get(e.target.dataset.guid).Fields[index];

        if (field.InputChar == 1) { return; }

        let v = e.target.value;
        
        // 全角数字変換
        if ((field.InputChar & 0x02) == 0x02) {
            v = v.replace(/[０-９]/g, function (x) { return String.fromCharCode(x.charCodeAt(0) - 0xFEE0) });
        }

        let limitChar = '[^';        
        if ((field.InputChar & 0x02) == 0x02) { limitChar += '0-9'; }  //数字      
        if ((field.InputChar & 0x04) == 0x04) { limitChar += 'a-z'; }  //小アルファベット
        if ((field.InputChar & 0x08) == 0x08) { limitChar += 'A-Z'; }  //大アルファベット
        if ((field.InputChar & 0x10) == 0x10) { limitChar += 'ｦ-ﾟ'; }  //カナ
        if ((field.InputChar & 0x200) == 0x200) { limitChar += ' '; }  // [space]
        if ((field.InputChar & 0x400) == 0x400) { limitChar += ':'; }  // :        
        if ((field.InputChar & 0x800) == 0x800) { limitChar += '-'; }  // -        
        if ((field.InputChar & 0x2000) == 0x2000) { limitChar += '.'; } // .         
        if ((field.InputChar & 0x4000) == 0x4000) { limitChar += '/'; } // /
        if ((field.InputChar & 0x8000) == 0x8000) { limitChar += ','; } // ,
        limitChar += ']';
        var re = new RegExp(limitChar,'g');
        v = v.replace(re, '');

        //let v = e.target.value
        //    .replace(/[０-９]/g, function (x) { return String.fromCharCode(x.charCodeAt(0) - 0xFEE0) })
        //    .replace(/[^0-9,.-]/g, '');
        //.replace(/[０-９ａ-ｚＡ-Ｚ]/g, function(x){ return String.fromCharCode(x.charCodeAt(0) - 0xFEE0) })
        //.replace(/[^0-9a-zA-Z]/g, '');

        //.replace(/[^0-9]/g, '')
        e.target.value = v;
    }

    dispose(guid) {
        try {
            viewModelMap.delete(guid);
        } catch(err) {
            console.log(err);
        }
    }

    init(guid) {
        let viewModel = new JViewModel(guid);
        let key = `[data-guid="${guid}"]`;
        var list = document.querySelectorAll(key);
        list.forEach(item => {
            let field = new JValidField(item);
            viewModel.add(field);
        });
        this.viewModelMap.set(guid, viewModel);

        viewModel.Fields.forEach(item => {
            let id = `${guid}-${item.Index}`;
            var obj = document.getElementById(id);
            obj.addEventListener('focus', function (e) {
                console.log('focus', e.target.value, e.target.dataset.validName);
                let index = parseInt(e.target.dataset.validIndex);
                let field = window.inputCore.viewModelMap.get(e.target.dataset.guid).Fields[index];
                field.OrgText = e.target.value;
                if (((field.ShowStyle & 0x04) == 0x04) && e.target.value.length > 0) {
                    e.target.value = e.target.value.replace(",", "");
                }

                DotNet.invokeMethodAsync('HotelPms.Client.Blazor', 'InputCoreEvent', { ID: e.target.dataset.guid, Index: index, Name: e.target.dataset.validName, EventName: "focus", Key: "", OrgText: field.OrgText, Text: e.target.value })
                    .then(data => {
                        console.log(JSON.stringify(data)); 
                    });
            });
            obj.addEventListener('blur', function (e) {
                console.log('blur', e.target.value, e.target.dataset.validName);
                let index = parseInt(e.target.dataset.validIndex);
                var field = window.inputCore.viewModelMap.get(e.target.dataset.guid).Fields[index];
                DotNet.invokeMethodAsync('HotelPms.Client.Blazor', 'InputCoreEvent', { ID: e.target.dataset.guid, Index: index, Name: e.target.dataset.validName, EventName: "blur", Key: "", OrgText: field.OrgText, Text: e.target.value })
                    .then(data => {
                        console.log(JSON.stringify(data));
                        e.target.value = data.text; 
                    });

            });
            obj.addEventListener('keyup', function (e) {
                console.log('keyup', e.target.value, e.key, e.target.dataset.validName);

                if (e.key === "Enter" || e.key === "ArrowUp" || e.key === "End") {
                    e.preventDefault();
                    e.stopPropagation();
                    let index = parseInt(e.target.dataset.validIndex);
                    var field = window.inputCore.viewModelMap.get(e.target.dataset.guid).Fields[index];
                    DotNet.invokeMethodAsync('HotelPms.Client.Blazor', 'InputCoreEvent', { ID: e.target.dataset.guid, Index: index, Name: e.target.dataset.validName, EventName: "keyup", Key: e.key, OrgText: field.OrgText, Text: e.target.value })
                        .then(data => {
                            console.log(JSON.stringify(data));  

                            field.OrgText = data.orgText;
                            e.target.value = data.text; 
                            if (data.nextFocus.length > 0) {
                                let nextInput = document.getElementById(data.nextFocus);
                                nextInput.focus();
                                nextInput.select();
                            }
                        });
                } 
            });
            obj.addEventListener('keypress', function (e) {
                console.log('keypress', e.target.value, e.key, e.target.dataset.validName);
            });
            obj.addEventListener('keydown', function (e) {
                console.log('keydown', e.target.value, e.key, e.target.dataset.validName);
            });
            obj.addEventListener('change', function (e) {
                console.log('change', e.target.value, e.key, e.target.dataset.validName);
            });
            obj.addEventListener('input', function (e) {
                console.log('input', e.target.value, e.key, e.target.dataset.validName, e.isComposing);
                if (!e.isComposing) { InputCore.filter(e); }
            });
            obj.addEventListener('compositionstart', function (e) {
                console.log('compositionstart', e.target.value, e.target.dataset.validName);
            });
            obj.addEventListener('compositionend', function (e) {
                console.log('compositionend', e.target.value, e.target.dataset.validName);
                InputCore.filter(e);
            });
        });       
    }
};
window.inputCore = new InputCore();