// 그리드 에디터 : 숫자타입
export class CustomNumberEditor {
	constructor(props) {
		const { grid, rowKey, columnInfo } = props;
		const el = document.createElement('input');
		const numberOption = columnInfo.editor.options;

		this.minValue = numberOption.min;
		this.maxValue = numberOption.max;
		this.propsValue = props.value;
		this.colName = columnInfo.name;

		el.classList.add('tui-grid-content-text');
		el.type = 'number';
		el.value = props.value || 0;
		this.el = el;
		this.grid = grid;
		this.rowKey = rowKey;

		this.el.addEventListener('change', () => {
			grid.setValue(rowKey, columnInfo.name, this.getcheckValue());
		});
	}
	getElement() {
		return this.el;
	}
	getValue() {
		return this.el.value;
	}
	getcheckValue() {
		let returnVal;
		const editVal = this.grid.getValue(this.rowKey, this.colName);
		if (this.minValue != undefined && typeof this.maxValue != undefined) {
			if (
				Number(editVal) >= Number(this.minValue) &&
				Number(editVal) <= Number(this.maxValue)
			) {
				returnVal = editVal;
			} else {
				returnVal = this.propsValue;
			}
		} else {
			returnVal = editVal;
		}
		return returnVal;
	}
	mounted() {
		this.el.select();
	}
}
export class CustomCalcNumberEditor {
	constructor(props) {
		const { grid, rowKey, columnInfo } = props;
		const el = document.createElement('input');
		const calcOptions = columnInfo.editor.options;

		this.calculation = calcOptions.calculation; // 연산자 String
		this.calcColumns = calcOptions.calcColumns; // 연산해야할 컬럼이름 Array
		this.targetColumn = calcOptions.targetColumn; // 연산결과 컬럼이름 String

		el.classList.add('tui-grid-content-text');
		el.type = 'number';
		el.value = props.value;
		this.el = el;
		this.grid = grid;
		this.rowKey = rowKey;

		this.el.addEventListener('change', () => {
			grid.setValue(rowKey, this.targetColumn, this.getCalculation());

			grid.setValue(rowKey, 'rowStat', 'U');
			grid.addRowClassName(rowKey, 'row-insert');
		});
	}
	getElement() {
		return this.el;
	}
	getValue() {
		return this.el.value;
	}
	getCalculation() {
		let returnVal;
		switch (this.calculation) {
			case 'sum':
				returnVal = 0;
				this.calcColumns.forEach(columnNm => {
					if (this.grid.getValue(this.rowKey, columnNm) == null) {
						returnVal += 0;
					} else {
						returnVal +=
							parseInt(this.grid.getValue(this.rowKey, columnNm)) || 0;
					}
				});
				break;
			case 'double':
				returnVal = 1;
				this.calcColumns.forEach(columnNm => {
					returnVal *= parseInt(this.grid.getValue(this.rowKey, columnNm));
				});
				break;
			case 'division':
				returnVal = 2;
				var a = parseInt(this.grid.getValue(this.rowKey, this.calcColumns[0]));
				var b = parseInt(this.grid.getValue(this.rowKey, this.calcColumns[1]));
				returnVal = a / b;
				if (returnVal == Infinity) {
					returnVal = 0;
				}
				break;
		}
		return returnVal;
	}
	mounted() {
		this.el.select();
	}
}

export class CustomCheckbox {
	constructor(props) {
		const el = document.createElement('input');
		const { grid, rowKey, columnInfo } = props;

		el.type = 'checkbox';
		el.value = props.value;
		this.el = el;
		this.grid = grid;
		this.rowKey = rowKey;
		this.propsVal = props;
		this.onlyone = columnInfo.renderer.options.onlyone || false;
		this.disabled = columnInfo.renderer.options.disabled || false;
		this.colName = columnInfo.name;

		this.render(props);
		if (!this.disabled) {
			this.el.addEventListener('change', () => {
				const originValue = el.value;
				const changedValue = el.checked ? '1' : '0';

				grid.setValue(rowKey, columnInfo.name, changedValue);
				if (originValue == changedValue) {
					grid.removeRowClassName(rowKey, 'row-insert');
					grid.setValue(rowKey, 'rowStat', null);
				} else {
					grid.setValue(rowKey, 'rowStat', 'U');
					grid.addRowClassName(rowKey, 'row-insert');
				}

				// onlyone 처리 추가
				if (this.onlyone) {
					if (changedValue == '1') {
						this.grid.getData().forEach(row => {
							if (this.rowKey != row.rowKey && row[this.colName] == '1') {
								this.grid.setValue(row.rowKey, this.colName, '0');
								this.grid.setValue(row.rowKey, 'rowStat', 'U');
								this.grid.addRowClassName(row.rowKey, 'row-insert');
							}
						});
					}
				}
			});
		}
	}
	getElement() {
		return this.el;
	}
	render(props) {
		const val = props.value;
		this.el.checked = val == '1' ? true : false;
	}
}

export class CustomButton {
	constructor(props) {
		const el = document.createElement('button');
		const { grid, rowKey, columnInfo } = props;

		el.classList.add('v-btn-bg__blue');
		el.style.width = '90%';
		// el.type = "button";
		// el.value = props.value;
		el.innerText = props.value;
		this.el = el;
	}
	getElement() {
		return this.el;
	}
	getValue() {
		// return this.el.value;
	}
	mounted() {
		// this.el.focus();
	}
}
export class CustumInputButton {
	constructor(props) {
		const el = document.createElement('div');
		const elInput = document.createElement('input');
		const elButton = document.createElement('button');
		const { grid, rowKey, columnInfo } = props;

		el.classList.add('tui-grid-cell-content');
		el.style.display = 'flex';
		elInput.type = 'text';
		elInput.style.width = 'calc(100% - 30px)';
		elInput.style.color = 'white';
		elInput.classList.add('tui-grid-content-text');
		elButton.classList.add('v-btn-bg__blue');
		elButton.style.width = '30px';
		elButton.style.height = '30px';
		// el.type = "button";
		// el.value = props.value;
		elInput.value = props.value;
		el.append(elInput);
		el.append(elButton);
		this.el = el;
	}
	getElement() {
		return this.el;
	}
	getValue() {
		// return this.el.value;
	}
	mounted() {
		// this.el.focus();
	}
}

export class NewCustomRenderer {
	constructor(props) {
		//const { min, max } = props.columnInfo.renderer.options;
		// console.log('props: %o', props);
		
		const el = document.createElement('input');
		const { grid, rowKey, columnInfo } = props;
		let gridOriginData = grid.dataManager.getOriginData();
		// console.log('columnInfo', columnInfo.renderer.options);
		this.el = el;
		this.grid = grid;
		this.rowKey = rowKey;
		this.propsVal = props;
		this.disabled = false;
		if(columnInfo.renderer.options != undefined){
			this.disabled = columnInfo.renderer.options.disabled == undefined ? false : columnInfo.renderer.options.disabled;
			// this.onlyone = columnInfo.renderer.options.onlyone == undefined ? false : columnInfo.renderer.options.onlyone;
			// this.onlyone = columnInfo.renderer.options.onlyone || false;
		}
		
		this.colName = columnInfo.name;
		if (
			props.grid.store.data.rawData[props.rowKey].addInfoDataKind == 'FG'
		) {
			el.type = 'checkbox';
		} else {
			el.type = 'text';

			$(el).addClass('tui-grid-cell-content w100');
			$(el).css('text-align', 'center');
			$(el).css('border', '0');
		}
		this.render(props);
		if(!this.disabled){
			
			this.el.addEventListener('click', (event) => {			
				// const originValue = el.value;
				let originValue = null;
				if(el.type=='checkbox'){
					let changedValue = null;
					if (el.checked) {
						changedValue = 1;
					} else {
						changedValue = 0;
						if(gridOriginData[rowKey] != undefined && gridOriginData[rowKey][this.colName] != '1'){
							changedValue = gridOriginData[rowKey][this.colName];
						}
						
					}
					grid.setValue(rowKey, columnInfo.name, changedValue);
					if(gridOriginData[rowKey] != undefined){
						originValue = gridOriginData[rowKey][columnInfo.name];
					}
					if(originValue == changedValue){
						grid.removeRowClassName(rowKey, 'row-insert');
						grid.setValue(rowKey, 'rowStat', null);
					}else{
						grid.setValue(rowKey, 'rowStat', 'U');
						grid.addRowClassName(rowKey, 'row-insert');
					}
				}
			})
		}
	}

	getElement() {
		return this.el;
	}

	render(props) {
		// console.log('render___this.el.type', this.el.type);
		if (this.el.type == 'checkbox') {
			if (props.value == 1) {
				this.el.checked = true;
			} else {
				this.el.checked = false;
			}
		}
		this.el.value = props.value;					
	}
}

export class NewCustomEditor {
	constructor(props) {
		const { grid, rowKey, columnInfo } = props;
		let gridOriginData = grid.dataManager.getOriginData();
		this.gridOriginData = gridOriginData;
		this.rowKey = rowKey;
		this.columnInfo = columnInfo;
		this.grid = grid;
		const divEl = document.createElement('div');
		$(divEl).css('text-align', 'center');
		const el = document.createElement('input');
		if (
			props.grid.store.data.rawData[props.rowKey].addInfoDataKind == 'FG'
		) {
			el.type = 'checkbox';
			if (props.value == '1') {
				el.checked = true;
			} else {
				el.checked = false;
			}
			el.addEventListener('change', (ev) => {
				// console.log('props: %o', ev);
				if (ev.target.checked) {
					ev.target.value = 1;
					
				} else {
					ev.target.value = 0
					if(this.gridOriginData[this.rowKey] != undefined && this.gridOriginData[this.rowKey][this.columnInfo.name] != '1'){
						ev.target.value = this.gridOriginData[this.rowKey][this.columnInfo.name];
					}
				}
				let originValue = null;
				let changedValue = ev.target.value;
				// changedValue = this.el.value == null ? null : 0; 
				if(this.gridOriginData[this.rowKey] != undefined){
					originValue = this.gridOriginData[this.rowKey][this.columnInfo.name] == null ? 0 : this.gridOriginData[this.rowKey][this.columnInfo.name];
				}
				if(originValue == changedValue){
					this.grid.removeRowClassName(this.rowKey, 'row-insert');
					this.grid.setValue(this.rowKey, 'rowStat', null);
				}else{
					this.grid.setValue(this.rowKey, 'rowStat', 'U');
					this.grid.addRowClassName(this.rowKey, 'row-insert');
				}
			});
		} else {
			el.type = 'text';
			if (props.formattedValue == 'NUM') {
				el.oninput = function(event) {
					var regExp=/[^0-9]/g;
          if(event.data != null){
            if(event.data.match(regExp)){
              event.target.value = event.target.value.replace(regExp, '');
            }
          }
				};
			}
			$(el).addClass('tui-grid-content-text');
		}

		divEl.append(el);
		
		// console.log('props: %o', props);
		// console.log('el: %o', el);
		this.el = el;
		this.divEl = divEl;

		this.render(props);

	}

	getElement() {
		return this.divEl;
	}

	getValue() {
		return this.el.value;
	}

	render(props) {
		if (this.el.type == 'checked') {
			this.el.value = props.value;
		} else {
			this.el.value = String(props.value);
		}
		//console.log('props: %o', props);
	}

	mounted() {
		// if (this.el.type == 'checkbox') {
		// 	$(this.el.parentElement).css('text-align', 'center');
		// }
		this.el.select();
	}
}