import "./control.scss";

wp.customize.controlConstructor['kirki-date'] = wp.customize.kirkiDynamicControl.extend({

	handleWidth: (input) => {
		var styleTag = document.querySelector('#kirki-style-datepicker');
		styleTag.innerHTML = '.kirki-datepicker-popup {width: ' + input.clientWidth.toString() + 'px;}';
	},

	initKirkiControl: function (control) {
		var selector;

		control = control || this;
		selector = control.selector + ' input.datepicker';

		var styleTag = document.querySelector('#kirki-style-datepicker');

		if (!styleTag) {
			styleTag = document.createElement('style');
			styleTag.id = 'kirki-style-datepicker';
			document.head.appendChild(styleTag);
		}

		// Init the datepicker.
		jQuery(selector).datepicker({
			dateFormat: 'yy-mm-dd',
			duration: 200,
			beforeShow: function (input, inst) {
				inst.dpDiv[0].classList.add('kirki-datepicker-popup');
				control.handleWidth(input);
			}
		});

		// Save the changes
		this.container.on('change keyup paste', 'input.datepicker', function () {
			control.setting.set(jQuery(this).val());
		});
	}
});