<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 { currentProject, needProjectSave, peripherals } from './stores';
  import { SaveProject } from '../wailsjs/go/main/App.js';
  import { construct_svelte_component } from 'svelte/internal';
  import { EventsOn } from '../wailsjs/runtime'
  import { GetPeripherals } from "../wailsjs/go/main/App";

  // When the list of hardware changed, update the store
  EventsOn('PERIPHERAL_ARRIVAL', function(peripheralInfo){
        console.log("Hardware has been added to the system");
        console.log(peripheralInfo)
        $peripherals = [...$peripherals, peripheralInfo];
  })

  EventsOn('PERIPHERAL_REMOVAL', function(peripheralInfo){
        console.log("Hardware has been removed from the system");
        console.log(peripheralInfo)
        $peripherals = $peripherals.filter(item => JSON.stringify(item) !== JSON.stringify(peripheralInfo))
        console.log($peripherals)
       
        // $peripherals = devicesList
        // console.log(devicesList)
  })

  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")
    }).catch((error) => {
      console.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: "",
  });

  // Request the list of peripherals
  GetPeripherals()

</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}
</main>

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

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