var RootRezProperty = new Vue({
	el: '#rzProperty',
	key: 'rzProperty',
	data: {
		searchType: configJs.getAttribute('data-search-type'),
		property: JSON.parse(document.querySelector('#rzPropertyView').textContent),
		webroot: configJs.getAttribute('webroot'),
		session: JSON.parse(configJs.getAttribute('data-session')),
		loadingProperty: false,
		dateCheckin: '',
		dateCheckout: '',
		testvar: '',
		settings: null
	},
	beforeCreate: function () { },
	created: function () {
		let self = this;
		self.loadingProperty = true;
	},
	mounted: function () {
		let self = this;
		self.loadingProperty = true;
		self.searchType = configJs.getAttribute('data-search-type');
		self.property = JSON.parse(document.querySelector('#rzPropertyView').textContent);
		self.webroot = configJs.getAttribute('webroot');
		self.settings = JSON.parse(document.querySelector('#rzSettings').textContent);
		let propertyJson = JSON.stringify(self.property);
		self.createPreviewBookingDates();

		let nav = document.getElementsByClassName("hotel__nav");
		if (nav !== undefined && nav.length > 0 && nav !== null) {
			nav = nav[0].children[0].childElementCount;
		}

		if (nav !== undefined && nav !== '' && nav !== null) {
			const bookPriceBox = document.querySelector('.book-price-box');
			if (bookPriceBox !== undefined && bookPriceBox !== '' && bookPriceBox !== null) {
				const wBookPriceBox = 1200 / nav;
				if (wBookPriceBox);
				bookPriceBox.style.minWidth = `${wBookPriceBox}px`;
				bookPriceBox.style.maxWidth = `${wBookPriceBox}px`;
			}
		}

		axios.post(self.webroot + 'property-overview/' + this.property.id, propertyJson).then(function (response) {
			self.setPropertyOverview(response);
			self.setHanycWidget();

			$('#property-loader').show();

			initMap().then(function () {
				var marker = new google.maps.Marker({
					'class': 'single-hotel-pin',
					icon: {
						path: 'M12,1.33376581e-15 C5.37566713,0.00743982334 0.00743982682,5.37566461 0,11.9999944 C0,17.2649919 7.5,30.0374859 10.722,35.2859835 C10.9950577,35.7298159 11.4788974,36.0001299 12,35.9999831 C12.522091,36.0024657 13.007211,35.730867 13.278,35.2844835 C16.5,30.0389859 24,17.2709919 24,11.9999944 C23.9925602,5.37566461 18.6243329,0.00743982334 12,1.33376581e-15 Z M12,17 C9.23857625,17 7,14.7614237 7,12 C7,9.23857625 9.23857625,7 12,7 C14.7614237,7 17,9.23857625 17,12 C17,14.7614237 14.7614237,17 12,17 Z',
						fillColor: configJs.getAttribute('data-single-hotel-pin-color'),
						fillOpacity: 1,
						anchor: new google.maps.Point(0, 0),
						strokeWeight: 0,
						scale: 1,
						anchor: new google.maps.Point(12, 27),
					},
					map: map,
					zIndex: 10000,
					position: new google.maps.LatLng(configJs.getAttribute('data-lat') * 1, configJs.getAttribute('data-lng') * 1),
					title: configJs.getAttribute('data-property-name'),
				});
				marker.set('class', 'single-hotel-pin');

				google.maps.event.addListener(map, 'bounds_changed', function () {
					let mapHeight = $(map.getDiv()).children().eq(0).height();
					let mapWidth = $(map.getDiv()).children().eq(0).width();
					if (mapHeight == window.innerHeight && mapWidth == window.innerWidth) {
						customerMarkerInfoWindowEvent();
					} else {
						customerMarkerInfoWindowEvent(false);
					}
				});
			});

			self.loadPropertyRooms();
		});
	},
	methods: {
		createPreviewBookingDates: function () {
			let self = this;

			let checkin = new Date(self.session.checkin + 'T00:00:00');
			console.log(checkin);
			let checkinMonth = checkin.toLocaleString('en-US', { month: 'short' });
			let checkinDay = checkin.getDate();
			let testVar = 'test';
			testVar = checkinMonth + ' ' + checkinDay;

			self.dateCheckin = checkinMonth + ' ' + checkinDay;

			let checkout = new Date(self.session.checkout + 'T00:00:00');
			let checkoutMonth = checkout.toLocaleString('en-US', { month: 'short' });
			let checkoutDay = checkout.getDate();
			self.dateCheckout = checkoutMonth + ' ' + checkoutDay;
		},
		setHanycWidget: function () {
			let self = this;
			if (document.querySelector('#wim-module-loader') !== null) {
				let scriptSrc = document.querySelector('#wim-module-loader').getAttribute('src');
				var script = document.createElement('script');
				script.src = scriptSrc;
				script.type = 'text/javascript';
				script.defer = true;

				document.getElementsByTagName('head').item(0).appendChild(script);

				script.onload = function () {
					wimWidget.load([{
						"widget-id": "2788",
						"params": {
							"story-radius": [self.property.physical_address.latitude, self.property.physical_address.longitude, 0.2],
							"story-min-item": 10,
							"story-title": "Around the hotel",
							"add-marker": [self.property.physical_address.latitude, self.property.physical_address.longitude],
							"marker-title": self.property.name,
							"story": "none"
						}
					}]);
				};
			}
		},
		setPropertyOverview: function (response) {
			document.getElementById('property-overview').innerHTML = response.data;
		},
		loadPropertyRooms: function () {
			let self = this;
			const urlParams = new URLSearchParams(window.location.search);
			const affiliate = urlParams.get('affiliate');
			self.property = JSON.parse(document.querySelector('#rzPropertyView').textContent);
			axios.post(self.webroot + 'property-available/' + self.property.id + '?affiliate=' + affiliate).then(function (response) {
				self.setBookingPreview(response.data);
				self.datepicker(configJs, self.session);
				self.propertyPageInit();
				self.setPromotionTooltip();
			});
		},
		setBookingPreview: async function (html) {
			let self = this;
			document.getElementById('rooms-rates').innerHTML = html;
			self.property = JSON.parse(document.querySelector('#rzPropertyRooms').textContent);
			self.loadingProperty = false;
			self.session = JSON.parse(configJs.getAttribute('data-session'));
			await self.setMobileRatesPreview();
			dataLayer.push({ 'event': 'propertyDataLoaded' });
		},
		setMobileRatesPreview: function () {
			let rate = this.property.rate;
			let nightlyAvg = parseInt(rate.low.total.nightly_avg);
			let originalNightlyAvg = parseInt(rate.low.total.original_nightly_avg);
			let priceHtml = '';
			if (nightlyAvg < originalNightlyAvg) {
				strikethrough = `<span class="strikethrough-price">
				<span>$</span>
				${originalNightlyAvg}
				</span>`;
				priceHtml += strikethrough;
			}

			if (isNaN(nightlyAvg)) {
				priceHtml += `<a class="price jump-to-section" data-target="rooms-rates" style="font-size: 18px">Select a check-in date</a>`;
			} else {
				priceHtml += `<span class="price">
					<span class="currency">$</span>
						${nightlyAvg}
					</span>`;
			}

			$('.m-book-now__summary').html(priceHtml);
		},
		setPromotionTooltip: function () {
			setTimeout(function () {
				$('[rel=tooltip]').tooltip({
					'selector': '',
					'placement': 'bottom',
					'container': 'body',
					'template': '<div class="tooltip amen-tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
				});
				// fix background images on search results page for Safari 9 and 10
				$('.property-card').each(function () {
					var blockheight = $(this).find('.property-card_main').innerHeight();
					blockheight += $(this).find('.property-card_tabs').innerHeight();

					// sometimes the blockheight equals 0 here, default to 176 so at least image displays
					blockheight = blockheight <= 0 ? 170 : blockheight;

					$('.property-card_imgblock', this).css('height', blockheight);
				});
			}, 250);
		},
		toggleMobileGuests: function () {
			$('.occupancy-filters-update')
				.find('.cancel')
				.click(function (event) {
					$('.main-search_occupancy').removeClass('active');
					event.stopPropagation();
				});

			$('.occupancy-filters-update')
				.find('.apply')
				.click(function () {
					$('#main-form').submit();
				});

			$('.occupancy_mobile').click(function () {
				$('.main-search_occupancy').toggleClass('active');
			});
		},
		toggleGuestsEvent: function (objSession, objRootRez) {
			// open main div
			$('.main-search_occupancy').click(function (evt) {
				$(this).addClass('active');
				evt.preventDefault();
				evt.stopPropagation();

				$(document).one('click', function () {
					$('.main-search_occupancy').removeClass('active');
					if (objSession.hasChanged !== undefined) {
						if (objSession.hasChanged === true) {
							$('#main-form').submit();
						}
					}
				});
			});

			// guest counts
			$('.occupancy_filter').on('click', '[data-class="guest-counter"]', function () {
				objRootRez.modifyGuests(parseInt($(this).attr('data-value'), 10), $(this).attr('data-family'), $(this).parent().attr('data-index'));
			});

			// room counts
			$('.occupancy_filter').on('click', '[data-class="room-counter"]', function () {
				objRootRez.modifyRooms($(this).attr('data-value'), $(this).attr('data-index'));
			});
		},
		datepicker: function (objConfigJs, objSession) {
			var dpSettings = {
				'minDate': moment(objConfigJs.getAttribute('data-mindate'), 'MM/DD/YYYY'),
				'maxDate': moment(objConfigJs.getAttribute('data-maxdate'), 'MM/DD/YYYY'),
				'dateLimit': {
					'days': 28,
				},
				'offsetTop': configJs.getAttribute('data-datepicker-offsetTop').length === 0 ? false : configJs.getAttribute('data-datepicker-offsetTop'),
				'offsetLeft': configJs.getAttribute('data-datepicker-offsetLeft').length === 0 ? false : configJs.getAttribute('data-datepicker-offsetLeft'),
				'applyClass': '',
				'cancelClass': '',
				'buttonClasses': '',
			};

			var width = $('body').width();
			if (width <= 600) {
				dpSettings.offsetTop = 0;
				dpSettings.offsetLeft = 0;
			}

			try {
				dpSettings.startDate = moment(objSession.checkin).format('MM/DD/YYYY');
				dpSettings.endDate = moment(objSession.checkout).format('MM/DD/YYYY');
			} catch (err) {
				void 0;
			}

			$('#datepicker').daterangepicker(dpSettings, function (start, end) {
				$('#datepicker').html(start.format('MMM D, YYYY') + ' &rarr; ' + end.format('MMM D, YYYY'));
				$('[name="in"]').val(start.format('MM/DD/YYYY'));
				$('[name="out"]').val(end.format('MM/DD/YYYY'));
				$('#main-form').submit();
			});
		},
		propertyPageEvents: function () {
			if ($('.single-hotel').length === 0) {
				return false;
			}

			var objSession = JSON.parse(configJs.getAttribute('data-session'));

			var objRootRez = {
				objSession: objSession,
				modifyRooms: function (value, index) {
					if (this.objSession == undefined) {
						var element = $('.occupancy_filter-container .room[data-index="0"]');
						let rooms = [];
						rooms.push({
							adults: 2,
							children: 0,
						});
						this.objSession.rooms = rooms;
						this.objSession.hasChanged = true;
						var newElement = element.clone();
						$(newElement).attr('data-index', index);
						$('.occupancy_filter-container').append(newElement);
					} else {
						var element = $('#room-template');
						let rooms = this.objSession.rooms;
						if (value == -1 && rooms.length != 1) {
							rooms.splice(index, 1);
							$('.occupancy_filter-container .room[data-index="' + index + '"]').remove();
						} else if (value == 1 && rooms.length < 10) {
							rooms.push({ 'adults': 2, 'children': 0 });
							var newElement = element.clone();
							$(newElement).removeClass('hidden');
							$(newElement).attr('data-index', rooms.length - 1);
							$(newElement)
								.find('.occupancy-counter')
								.attr('data-index', rooms.length - 1);
							$(newElement)
								.find('.room-header_subtract')
								.attr('data-index', rooms.length - 1);
							$(newElement).find('.room-header_title span').text(rooms.length);
							$(newElement).appendTo('#room-group');
						} else {
							return false;
						}
						this.objSession.rooms = rooms;
						this.objSession.hasChanged = true;
						$('input[name="rooms"]').val(this.objSession.rooms.length);
					}
				},
				modifyGuests: function (value, type, index) {
					let rooms = this.objSession.rooms;
					if (type == 'adults') {
						if (rooms[index].adults == 1 && value == -1) {
							return false;
						} else if (rooms[index].adults == 10 && value == 1) {
							return false;
						}

						var intAdults = parseInt(rooms[index].adults, 10) + parseInt(value, 10);
						rooms[index].adults = intAdults;
						var element = $('.guest-num-adults .occupancy-counter[data-index="' + index + '"]');
						$(element).find('[data-family="session-adults"]').attr('data-ref', intAdults);
						$(element).find('[data-family="session-adults"]').text(intAdults);
						$(element).find('input').val(intAdults);
					} else if (type == 'children') {
						if (rooms[index].children == 0 && value == -1) {
							return false;
						} else if (rooms[index].children == 10 && value == 1) {
							return false;
						}

						var intChildren = parseInt(rooms[index].children, 10) + parseInt(value, 10);
						rooms[index].children = intChildren;
						var element = $('.guest-num-children .occupancy-counter[data-index="' + index + '"]');
						$(element).find('[data-family="session-children"]').attr('data-ref', intChildren);
						$(element).find('[data-family="session-children"]').text(intChildren);
						$(element).find('input').val(intChildren);
					}

					this.objSession.rooms = rooms;
					this.objSession.hasChanged = true;
				},
			};

			this.toggleGuestsEvent(objSession, objRootRez);
			this.toggleMobileGuests();

			$('.jump-to-section').click(function () {
				$('html,body').animate({ scrollTop: $('#' + $(this).attr('data-target')).offset().top - 70 }, 1000);
				if ($(this).attr('data-target') == 'rooms-rates' && configJs.getAttribute('data-search-type') == 'browse') {
					$('#datepicker').trigger('click');
				}
			});

			$('.single-hotel .toggle-link')
				.unbind('click')
				.bind('click', function () {
					$('.single-hotel .view-more-list')
						.toggleClass('open')
						.promise()
						.done(function () {
							/**
							 * Conditionally load slick on view more toggle if it has not been loaded already. Slick fails
							 * to load in a hidden state so this hack is necessary.
							 */
							$('.room-info:gt(2)').each(function () {
								if ($(this).hasClass('slick-initialized') === false) {
									$(this).slick({
										variableWidth: true,
										nextArrow: '<button class="icon slick-next"><svg><use xlink:href="#icon-next"></use></svg></button>',
										prevArrow: '<button class="icon slick-prev"><svg><use xlink:href="#icon-prev"></use></svg></button>',
									});
								}
							});
						});

					var i = $(this).parent();

					if ($(i).hasClass('open')) {
						$(i).removeClass('open');
						$(this).find('span').text('More Rooms');
					} else {
						$(i).addClass('open');

						$(this).find('span').text('Less Rooms');
					}
				});
		},
		propertyPageInit: function () {
			//console.log('property page init');

			if ($('.single-hotel').length === 0) {
				return false;
			}

			this.shoppingCartInit();

			// Mobile accordions
			var vwidth = $('html').width();
			var vheight = $('html').height();

			if (vwidth >= 600) {
				// hack for: https://app.asana.com/0/311414338222498/904938342464451/f
				var newHeight = $('.hotel__overview').outerHeight();
				$('.mini-map').css('height', newHeight);
			}

			if ((window.matchMedia('(orientation: portrait)').matches && vwidth <= 420) || (window.matchMedia('(orientation: landscape)').matches && vheight <= 420)) {
				var allPanels = $('.accordion-content').not(':eq(0)').hide();

				$('.accordion')
					.find('.accordion-toggle')
					.unbind('click')
					.click(function () {
						$(this).next().slideToggle('fast');
						$(this).parent('div').toggleClass('open');
						$('.accordion.open').not($(this).parent('div')).removeClass('open');

						$('.accordion-content').not($(this).next()).slideUp('fast');
						//$('.accordion.open').not(this).removeClass('open');
					});

				$('.hotel__location')
					.unbind('click')
					.find('.accordion-toggle')
					.click(function () {
						$('.mini-map').toggleClass('open');
					});
			}

			// Read more
			$('.room-card').on('click', 'a[data-group="toggle-description"]', function () {
				$(this).prev().toggleClass('truncated');
				if ($(this).prev().hasClass('truncated')) {
					let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
					$('html,body').animate(
						{
							scrollTop: scrollTop,
						},
						50
					);
				}
				$(this).toggleText('Read More', 'Read Less');
			});
			// Reviews read more
			$('.review__content-entry').on('click', 'a[data-group="toggle-description"]', function () {
				$(this).prev().toggleClass('truncated');
				$(this).parent().parent().parent().find('.review__meta-subratings').toggleClass('hidden');
				$(this).toggleText('Read More', 'Read Less');
			});

			// Stick nav to top
			function sticktothetop() {
				var window_top = $(window).scrollTop();
				var top = $('.sticknav').offset().top;
				if (window_top > top) {
					$('.hotel__nav').addClass('stick');
					//$('.sticknav').height($('.hotel__nav').outerHeight());
					$('.main-content').css('margin-top', $('.hotel__nav').outerHeight());
				} else {
					$('.hotel__nav').removeClass('stick');
					//$('.sticknav').height(0);
					$('.main-content').css('margin-top', 0);
				}
			}
			$(function () {
				$(window).scroll(sticktothetop);
				sticktothetop();
			});

			// Mobile book now

			var previousScroll = 25,
				menuOffset = 200,
				hideShowOffset = 6;

			$(window).scroll(function () {
				var currentScroll = $(this).scrollTop(), // gets current scroll position
					scrollDifference = Math.abs(currentScroll - previousScroll); // calculates how fast user is scrolling

				if (currentScroll > menuOffset) {
					if (scrollDifference >= hideShowOffset) {
						if (currentScroll > previousScroll) {
							// scrolling down; hide menu
							if (!$('.m-book-now').hasClass('clear')) {
								$('.m-book-now').addClass('clear');
							}
						} else {
							// scrolling up; show menu
							if ($('.m-book-now').hasClass('clear')) {
								$('.m-book-now').removeClass('clear');
							}
						}
					}
				}
				// if user is at the bottom of document show
				if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
					$('.m-book-now').removeClass('clear');
				}

				// replace previous scroll position with new one
				previousScroll = currentScroll;
			});

			// Modal window

			$('#star-rating-explained').on('click', function (e) {
				e.preventDefault();
				$('.modal').toggleClass('is-visible');
			});

			this.datepicker(configJs, JSON.parse(configJs.getAttribute('data-session')));

			this.propertyPageEvents();

			$('.room-info:lt(3)').slick({
				variableWidth: true,
				nextArrow: '<button class="icon slick-next"><svg><use xlink:href="#icon-next"></use></svg></button>',
				prevArrow: '<button class="icon slick-prev"><svg><use xlink:href="#icon-prev"></use></svg></button>',
			});
		},
		shoppingCartInit: function () {
			// console.log(RootRez.settings);
			if (RootRez.settings.shopping_cart == false) {
				return false;
			}

			var webroot = configJs.getAttribute('webroot');
			var destinationId = configJs.getAttribute('data-destination-id');

			let cart = $.ajax({
				dataType: 'json',
				url: webroot + 'ticket/offers/available/' + destinationId,
			});

			cart
				.done(function (data) {
					let hasOffersElement = $('.lift-tix__summary[data-type="cart-has-offers"]');
					let noOffersElement = $('.lift-tix__summary[data-type="cart-no-offers"]');

					$(hasOffersElement).addClass('hidden');
					$(noOffersElement).addClass('hidden');
					$('.button-array').removeClass('tix-available');
					if (RootRez.settings.shopping_cart_modal_box == false) {
						$('.button-array').removeClass('show-modal');
					} else {
						$('.button-array').addClass('show-modal');
					}
					if (data.available > 0) {
						$('.button-array').addClass('tix-available');
						$(hasOffersElement).removeClass('hidden');
						/**
					$(hasOffersElement).find('span[data-type="offers-available"]').text(data.available);
					$(hasOffersElement).find('span[data-type="offers-lowest-price"]').text(data.lowest_price.price);
					if (data.percentage_off > 0) {
						$(hasOffersElement).find('span[data-type="offers-percentage-off"]').text('(' + data.percentage_off + '% off)');
					}
					 */
						return true;
					}
					$(noOffersElement).removeClass('hidden');
				})
				.fail(function (jqXHR, textStatus, errorThrown) {
					void 0;
				});
		},
	},
	computed: {
	}
});