const signupform = document.getElementById('signupform');
const islandSelect = document.getElementById('island');

let tags;
let neighborhoods;

const url = window.location.hostname == 'localhost' ? 
'http://localhost:5001' : 
'https://beyondbeachesvi.com' 

async function getProfileTags() {
	const request = await fetch(`${url}/profile/getProfileTags`, {
		method: 'GET'
	})
	const json = await request.json()
	return json
};

async function getIslandNeighborhoods() {
	const request = await fetch(`${url}/profile/getIslandNeighborhoods`, {
		method: 'GET'
	})
	const json = await request.json()
	return json
};

(async function() {
	const [tags1, neighborhoods1] = await Promise.all([getProfileTags(), getIslandNeighborhoods()]);
	const categorySelect = document.getElementById('category');
	tags = tags1
	neighborhoods = neighborhoods1
	tags1.forEach(element => {
		const option = document.createElement('option')
		option.value = element.category;
		option.textContent = element.category;
		categorySelect.appendChild(option)
	});
})();

window.loadSubcategories = function() {
	const categorySelect = document.getElementById('category');
	const selectedCategory = categorySelect.value;
	const subcategoryContainer = document.getElementById('subcategory-container');
	const subcategoryDiv = document.getElementById('subcategories');
	subcategoryContainer.innerHTML = '';
	subcategoryDiv.innerHTML = '';
	
	const subCategories = tags.find(category => category.category == selectedCategory)
	if (subCategories.subcategories) {
		const subcategorySelect = document.createElement('select')
		subcategorySelect.name = 'business_sub_type';
		subcategorySelect.multiple = true;
		const defaultSelectOption = document.createElement('option')
		// defaultSelectOption.value = ''
		// defaultSelectOption.textContent = 'Select a Subcategory'
		// subcategorySelect.appendChild(defaultSelectOption)
		subCategories.subcategories.forEach(subC => {
			const option = document.createElement('option');
			option.value = subC.name;
			option.textContent = subC.name;
			subcategorySelect.appendChild(option)
		})
		subcategoryDiv.appendChild(subcategorySelect)
		subcategoryContainer.style.display = 'block'
		subcategoryContainer.appendChild(subcategoryDiv)
	}
}

function readFileAsBase64(file) {
	return new Promise((resolve, reject) => {
		if(!(file instanceof File) || file.size == 0) {
			resolve(null);
			return;
		}
		const reader = new FileReader()
		reader.readAsDataURL(file)
		reader.onloadend = () => {
			const base64 = reader.result.split(',')[1];
			const type = reader.result.split("/")[1].split(";")[0]
			resolve([base64, type])
		}
		reader.onerror = (error) => reject(error)
	})
}

async function postFormDataAsJson(event) {
	// Text input from form
	const formData = new FormData(event.currentTarget);
	const plainFormData = {}

	formData.forEach((value, key) => {
		 if (plainFormData[key]) {
			// If the key already has a value and it's not already an array, convert it to an array
			if (!Array.isArray(plainFormData[key])) {
				plainFormData[key] = [plainFormData[key]].replace(/\s+/g, ' ').trim();;
			}
			// Push the new value to the array
			plainFormData[key].push(value);
		} else {
			// Otherwise, just assign the value to the key
			plainFormData[key] = value.length > 0 ? value.replace(/\s+/g, ' ').trim() : null;
		}
	});

	const file = formData.get('venue_image')
	const [b64, type] = await readFileAsBase64(file)
	plainFormData['venue_image'] = b64
	plainFormData['venue_image_type'] = type

	console.log('data::', plainFormData)

	// const url = event.target.action;
	const url = window.location.hostname == 'localhost' ? 
	'http://localhost:5001/profile/addNewProfile' : 
	'https://beyondbeachesvi.com/profile/addNewProfile' 


	// Form data stringified for Request body
	const formDataJsonString = JSON.stringify(plainFormData);

	const fetchOptions = {
		method: 'POST',
		headers: {
			'Content-Type': 'application/json',
			Accept: 'application/json',
		},
		body: formDataJsonString,
	};

	const response = await fetch(url, fetchOptions);

	if (!response.ok) {
		const errorMessage = await response.text();
		throw new Error(errorMessage);
	}
	
	if (response.ok) {
		const data = await response.json()
		document.getElementById('profileRegistrationNotification').textContent=`New profile created for business ${data.business_name}`
	}
}

async function handleFormSubmit(event) {
	try {
		await postFormDataAsJson(event);
	} catch (error) {
		document.getElementById('profileRegistrationNotification').textContent=error
		console.error('EROR YALL', error);
	}
};

const businessSignupForm = document.getElementById('businessProfileForm');

businessSignupForm.addEventListener('submit', async (e) => {
	e.preventDefault();
	// access signup button on form
	const profileSignupButton = document.getElementById('profileSignupButton');
	// if disabled, end function
	if(profileSignupButton.disabled == true) return;
	// disable button functionalty and change text while API call is happening
	profileSignupButton.disabled = true;
	profileSignupButton.value = 'Processing...';
	// attempt to handle form submission
	await handleFormSubmit(e);
	// form submission ends, re-enable button
	profileSignupButton.disabled = false;
	profileSignupButton.value = 'Register Business';
});

islandSelect.addEventListener('change', function(e){

	const neighborhoodDiv = document.getElementById('neighborhoodDiv');
	const neighborhoodSelect = document.getElementById('neighborhoodSelect');
	neighborhoodDiv.style.display = 'block';
	neighborhoodSelect.innerHTML = '';

	neighborhoods
    .filter(elem => elem.island === e.target.value)
    .flatMap(elem => elem.neighborhoods)
    .forEach(item => {
        const option = document.createElement('option');
        option.value = item;
        option.textContent = item;
        neighborhoodSelect.appendChild(option);
    });

})