<script>
  import { _ } from 'svelte-i18n'
	import NavigationBar from './components/General/NavigationBar.svelte';
  import Clock from './components/General/Clock.svelte'
  import Preparation from './components/Preparation/Preparation.svelte';
  import Animation from './components/Animation/Animation.svelte';
  import Settings from './components/Settings/Settings.svelte';
  import Devices from './components/Devices/Devices.svelte';
  import Show from './components/Show/Show.svelte';
  import GeneralConsole from './components/Console/GeneralConsole.svelte';
  import RoundIconButton from './components/General/RoundIconButton.svelte';
  import { generateToast, currentProject, needProjectSave } from './stores';
  import { SaveProject } from '../wailsjs/go/main/App.js';
    import { construct_svelte_component } from 'svelte/internal';
    import ToastNotification from './components/General/ToastNotification.svelte';

  let selectedMenu = "settings"
  // When the navigation menu changed, update the selected menu
	function onNavigationChanged(event){
    selectedMenu = event.detail.menu;
	}

  // Save the project
  function saveProject(){
    SaveProject($currentProject).then((saveFile) => {
      console.log($currentProject)
      $currentProject.SaveFile = saveFile
      needProjectSave.set(false)
      console.log("Project has been saved")
      generateToast('info', 'bxs-save', 'The project has been saved')
    }).catch((error) => {
      console.error(`Unable to save the project: ${error}`)
      generateToast('danger', 'bx-error', 'Unable to save the project: ' + error)
    })
  }

  function formatDate(date) {
    const pad = (number) => number.toString().padStart(2, '0');
    const year = date.getFullYear();
    const month = pad(date.getMonth() + 1); // Les mois commencent à 0
    const day = pad(date.getDate());
    const hours = pad(date.getHours());
    const minutes = pad(date.getMinutes());
    return `${year}-${month}-${day}T${hours}:${minutes}`;
  }

  currentProject.set({
    Name: "My new show",
    Date: formatDate(new Date()),
    Avatar: "appicon.png",
    UniversesNumber: 1,
    Comments: "Write your comments here",
    SaveFile: "",
  });

</script>

<header>
    <NavigationBar on:navigationChanged="{onNavigationChanged}"/>
    {#if $needProjectSave}
      <RoundIconButton on:click={saveProject} icon="bx-save" width="2.5em" tooltip={$_("saveButtonTooltip")}></RoundIconButton>
    {/if}
    <Clock/>
</header>
<main>
	{#if selectedMenu === "settings"}
  <Settings />
  {:else if selectedMenu === "devices"}
  <Devices />
  {:else if selectedMenu === "preparation"}
  <Preparation />
  {:else if selectedMenu === "animation"}
  <Animation />
  {:else if selectedMenu === "show"}
  <Show />
  {:else if selectedMenu === "console"}
  <GeneralConsole />
  {/if}
  <ToastNotification/>
</main>

<style>
	main {
		text-align: left;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>