const Keyboard = window.SimpleKeyboard.default;
const KeyboardLayouts = window.SimpleKeyboardLayouts.default;

const layout = new KeyboardLayouts().get("chinese");

var inputDom;

var displayDefault = {
      '{bksp}': 'backspace',
      '{lock}': 'caps',
      '{enter}': '> enter',
      '{tab}': 'tab',
      '{shift}': 'shift',
      '{change}': '英文',
      '{space}': ' ',
      '{clear}': '清空',
      '{close}': '关闭',
    }

const myKeyboard = new Keyboard({
  onChange: input => onChange(input),
  onKeyPress: button => onKeyPress(button),
  layoutCandidates: layout.layoutCandidates,
  display: displayDefault,
  layout: {
    // 默认布局
    default: [
		'` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
        '{tab} q w e r t y u i o p [ ] \\',
        "{lock} a s d f g h j k l ; ' {enter}",
        '{shift} z x c v b n m , . / {clear}',
        '{change} {space} {close}',
    ],
    // shift布局
    shift: [
		'~ ! @ # $ % ^ & * ( ) _ + {bksp}',
        '{tab} Q W E R T Y U I O P { } |',
        '{lock} A S D F G H J K L : " {enter}',
        '{shift} Z X C V B N M < > ? {clear}',
        '{change} {space} {close}',
        ],
    },
	// 按钮样式
	buttonTheme: [
		{
			class: 'hg-red close',
	        buttons: '{close}',
	    },
	    {
	        class: 'change',
	        buttons: '{change}',
	    },
	],
	// 输入限制长度
	//maxLength: this.maxLength,
});


function onChange(input) {
  inputDom.value = input;
  console.log("Input changed", input);
}

function onKeyPress(button, $event) {
	// 点击关闭
    if (button === '{close}') {
		$(".keyboard").hide();
        return false;
    } else if (button === '{change}') {
        // 切换中英文输入法
        if (myKeyboard.options.layoutCandidates !== null) {
		  displayDefault["{change}"] = '中文';
          // 切换至英文
          myKeyboard.setOptions({
            layoutCandidates: null,
            display: displayDefault
          });
        } else {
          // 切换至中文
		  displayDefault["{change}"] = '英文';
          myKeyboard.setOptions({
            layoutCandidates: layout.layoutCandidates,
            display: displayDefault
          });
        }
    } else if (button === '{clear}') {
        console.log("清空")
        clearKeyboard()
    } else {
        
    }
    if (button === '{shift}' || button === '{lock}') this.handleShift();
}
    // 切换shift/默认布局
function handleShift() {
    let currentLayout = myKeyboard.options.layoutName;
    let shiftToggle = currentLayout === 'default' ? 'shift' : 'default';

    myKeyboard.setOptions({
		layoutName: shiftToggle,
    });
}

function clearKeyboard(){
    myKeyboard.clearInput();
}

$(".keyboardBackground").click(function (){
    $(".keyboard").hide();
})