erpnext.PointOfSale.NumberPad = class {
	constructor({ wrapper, events, cols, keys, css_classes, fieldnames_map }) {
		this.wrapper = wrapper;
		this.events = events;
		this.cols = cols;
		this.keys = keys;
		this.css_classes = css_classes || [];
		this.fieldnames = fieldnames_map || {};

		this.init_component();
	}

	init_component() {
		this.prepare_dom();
		this.bind_events();
	}

	prepare_dom() {
		const { cols, keys, css_classes, fieldnames } = this;

		function get_keys() {
			return keys.reduce((a, row, i) => {
				return a + row.reduce((a2, number, j) => {
					const class_to_append = css_classes && css_classes[i] ? css_classes[i][j] : '';
					const fieldname = fieldnames && fieldnames[number] ? 
						fieldnames[number] : typeof number === 'string' ? frappe.scrub(number) : number;

						return a2 + `<div class="numpad-btn pointer no-select rounded ${class_to_append}
							flex items-center justify-center h-16 text-md border-grey border" data-button-value="${fieldname}">${number}</div>`
				}, '')
			}, '');
		}

		this.wrapper.html(
			`<div class="grid grid-cols-${cols} gap-4">
				${get_keys()}
			</div>`
		)
	}

	bind_events() {
		const me = this;
		this.wrapper.on('click', '.numpad-btn', function() {
			const $btn = $(this);
			me.events.numpad_event($btn);
		});
	}
}