<page>
		<actionBar title="Boss Party 2" />

		<tabs tabsPosition="bottom">
				<tabStrip>
						<tabStripItem title="Bosses" />
						<tabStripItem title="Party" />
						<tabStripItem title="Inventory" />
						<tabStripItem title="Spells" />
						<tabStripItem title="Settings" />

				</tabStrip>

				<tabContentItem>

					<gridLayout columns="*,120" rows="70,*">
							<!-- Configures the text field and ensures that pressing Return on the keyboard
									produces the same result as tapping the button. -->
							<textField col="0" row="0" hint="Type new task..." editable="true"
									on:returnPress="{onButtonTap}" />
							<button col="1" row="0" text="Add task" on:tap="{onButtonTap}" class="-primary"/>

							<listView items="{todos}" on:itemTap="{onItemTap}" row="1" colSpan="2">

							</listView>
					</gridLayout>

				</tabContentItem>

				<!-- Party -->
				<tabContentItem>
					<stackLayout >
						<listView items="{listOfWeapons}" on:itemTap="{onItemTap}">
							<Template let:item>
								<label text="{item}" />
							</Template>
						</listView>
					</stackLayout>
				</tabContentItem>

				<!-- Inventory -->
				<tabContentItem>
					<stackLayout >
						<listView items="{listOfWeapons}" on:itemTap="{onItemTap}">
							<Template let:item>
								<label text="{item}" />
							</Template>
						</listView>
					</stackLayout>
				</tabContentItem>

				<!-- Spells -->
				<tabContentItem>
					<stackLayout >
						<listView items="{listOfItems}" on:itemTap="{onItemTap}">
							<Template let:item>
								<label text="{item}" />
							</Template>
						</listView>

					</stackLayout>
				</tabContentItem>


				<!-- Seettings -->
				<tabContentItem>
					<stackLayout>
						<label text="Goal: Clicking a button will trigger a progress " />
						<textField keyboardType="number"></textField>

						<progress value="{currentProgress}" />
						<!-- <progress value="69" /> -->
						<button text="Button" on:tap="{onGoal}" />
						<label text="Goal: Clicking a button will trigger a progress bar" />

					</stackLayout>
				</tabContentItem>
		</tabs>
</page>

<script>


		import { Template } from 'svelte-native/components'
		let listOfItems = ['Gear', 'Weapons', 'Gems','Potions']
		let listOfWeapons = ['SSword', 'Staff', 'Bow','Relic']

		const selectedIndexChanged = (e) => console.log(e.index)

		let items = ["item 0", "item 1"]
		function selectTemplate(item, index, items) {
			// Your logic here
			return  (index % 2 == 0) ? "even" : "odd";
		}


		let currentProgress = 49
		let todos = []
		let dones=[] //completed items go here
		const removeFromList = (list, item) => list.filter(t => t !== item);
		const addToList = (list, item) => [item, ...list]
		let textFieldValue = ""


		async function onItemTap(args) {


		}

		function onGoal() {
			currentProgress = 100;
		}

		function onButtonTap() {
			if (textFieldValue === "") return; // Prevents users from entering an empty string.
			console.log("New task added: " + textFieldValue + "."); // Logs the newly added task in the console for debugging.
			todos = [{ name: textFieldValue }, ...todos] // Adds tasks in the ToDo array. Newly added tasks are immediately shown on the screen.
			textFieldValue = ""; // Clears the text field so that users can start adding new tasks immediately.
		}

		async function onDoneTap(args) {
			let result = await action("What do you want to do with this task?", "Cancel", [
					"Mark To Do",
					"Delete forever"
			]);

			console.log(result); // Logs the selected option for debugging.
			let item = dones[args.index]
			switch (result) {
					case "Mark To Do":
							todos = addToList(todos, item) // Places the tapped active task at the top of the completed tasks.
							dones = removeFromList(dones, item) // Removes the tapped active task.
							break;
					case "Delete forever":
							dones = removeFromList(dones, item) // Removes the tapped active task.
							break;
					case "Cancel" || undefined: // Dismisses the dialog
							break;
			}
		}


</script>

<style>
	textField {
			font-size: 20;
	}
</style>