import { createApp } from 'vue'
// import css
import './style.css'
// import app racine pour page admin
import Admin from './Admin.vue'
// import composants
import EventEditor from './components/EventEditor.vue'
import LinkEditor from './components/LinkEditor.vue'
import PlaylistEditor from './components/PlaylistEditor.vue'

// creation app
const app = createApp(Admin);
// Composants
app.component('eventEditor', EventEditor);
app.component('linkEditor', LinkEditor);
app.component('playlistEditor', PlaylistEditor)

// montage dans div#adminContent
app.mount('#adminContent');

//import variables reactive
import { pannelStatusList }  from './pannelStatus.js'

document.documentElement.setAttribute('data-theme', 'main');

let eventBtn = document.querySelector('#eventBtn');
let eventTarget = document.querySelector('#event .windowContent');

let linkBtn = document.querySelector('#linkBtn');
let linkTarget = document.querySelector('#link .windowContent');

let playlistBtn = document.querySelector('#playlistBtn');
let playlistTarget = document.querySelector('#playlist .windowContent');


eventBtn.addEventListener('click', () => {
  pannelStatusList.event = !pannelStatusList.event;
  eventTarget.style.height = pannelStatusList.event ? '75vh' : 'auto';
  document.querySelector('#eventBtn .icon').style.transform = pannelStatusList.event ? 'rotate(45deg)' : 'rotate(0)'
})

linkBtn.addEventListener('click', () => {
  pannelStatusList.link = !pannelStatusList.link;
  if(pannelStatusList.link){
    pannelStatusList.playlist = false;
    playlistTarget.style.height = 'auto';
    document.querySelector('#playlistBtn .icon').style.transform = 'rotate(45deg)'
  }
  linkTarget.style.height = pannelStatusList.link ? '64.5vh' : '0';
  document.querySelector('#linkBtn .icon').style.transform = pannelStatusList.link ? 'rotate(45deg)' : 'rotate(0)'
})

playlistBtn.addEventListener('click', () => {
  pannelStatusList.playlist = !pannelStatusList.playlist;
  if(pannelStatusList.playlist){
    pannelStatusList.link = false
    linkTarget.style.height = 'auto';
    document.querySelector('#linkBtn .icon').style.transform = 'rotate(45deg)'
  }
  playlistTarget.style.height = pannelStatusList.playlist ? '64.5vh' : 'auto';
  document.querySelector('#playlistBtn .icon').style.transform = pannelStatusList.playlist ? 'rotate(45deg)' : 'rotate(0)'
})