(function ($) {
	'use strict';

	var cfg = window.rcSettingsData || {};
	var $modal = null;
	var $form = null;
	var $error = null;
	var $logoUrl = null;
	var $logoPreview = null;
	var $removeLogo = null;

	function init() {
		$modal = $('#rc-restaurant-modal');
		if (!$modal.length) {
			return;
		}

		$form = $('#rc-restaurant-modal-form');
		$error = $('#rc-restaurant-modal-error');
		$logoUrl = $('#rc-restaurant-logo-url');
		$logoPreview = $('#rc-restaurant-logo-preview');
		$removeLogo = $('#rc-restaurant-remove-logo');

		$('#rc-restaurant-info-btn').on('click', openRestaurantModal);
		$modal.on('click', '.rc-modal-close, .rc-modal-cancel, .rc-modal-backdrop', closeModal);
		$form.on('submit', saveRestaurantInfo);
		$('#rc-restaurant-upload-logo').on('click', uploadLogo);
		$removeLogo.on('click', removeLogo);

		$(document).on('keydown', function (e) {
			if (e.key === 'Escape' && !$modal.prop('hidden')) {
				closeModal(e);
			}
		});
	}

	function openRestaurantModal(e) {
		e.preventDefault();
		$form[0].reset();
		$error.prop('hidden', true).text('');
		$logoPreview.empty();
		$removeLogo.hide();

		$.getJSON(cfg.ajaxUrl, {
			action: 'rc_get_restaurant_info',
			nonce: cfg.nonce
		}).done(function (resp) {
			if (resp && resp.success && resp.data && resp.data.id) {
				var d = resp.data;
				$('#rc-restaurant-name').val(d.restaurant_name || '');
				$('#rc-restaurant-address').val(d.address || '');
				$('#rc-restaurant-phone').val(d.phone || '');
				$('#rc-restaurant-sender-name').val(d.sender_name || '');
				$('#rc-restaurant-sender-email').val(d.sender_email || '');
				if (d.logo_url) {
					$logoUrl.val(d.logo_url);
					showLogoPreview(d.logo_url);
				}
			}
		});

		$modal.prop('hidden', false);
	}

	function closeModal(e) {
		if (e) {
			e.preventDefault();
		}
		$modal.prop('hidden', true);
	}

	function uploadLogo() {
		var frame = wp.media({
			title: 'Choose Logo',
			library: { type: 'image' },
			multiple: false,
			button: { text: 'Use as Logo' }
		});

		frame.on('select', function () {
			var attachment = frame.state().get('selection').first().toJSON();
			$logoUrl.val(attachment.url);
			showLogoPreview(attachment.url);
		});

		frame.open();
	}

	function showLogoPreview(url) {
		$logoPreview.html('<img src="' + url + '" style="max-width:200px; max-height:100px; border:1px solid #ddd; border-radius:4px; padding:4px;" />');
		$removeLogo.show();
	}

	function removeLogo() {
		$logoUrl.val('');
		$logoPreview.empty();
		$removeLogo.hide();
	}

	function saveRestaurantInfo(e) {
		e.preventDefault();
		$error.prop('hidden', true).text('');

		var $btn = $form.find('button[type="submit"]');
		$btn.prop('disabled', true);

		$.post(cfg.ajaxUrl, {
			action: 'rc_save_restaurant_info',
			nonce: cfg.nonce,
			restaurant_name: $('#rc-restaurant-name').val(),
			address: $('#rc-restaurant-address').val(),
			phone: $('#rc-restaurant-phone').val(),
			logo_url: $logoUrl.val(),
			sender_name: $('#rc-restaurant-sender-name').val(),
			sender_email: $('#rc-restaurant-sender-email').val()
		}).done(function (resp) {
			if (!resp || !resp.success) {
				$error.text((resp && resp.data && resp.data.message) || 'Could not save.').prop('hidden', false);
				return;
			}
			closeModal(e);
		}).fail(function () {
			$error.text('Request failed.').prop('hidden', false);
		}).always(function () {
			$btn.prop('disabled', false);
		});
	}

	$(init);
})(jQuery);
