import GameServerProfile from './profile';
import { shell, ipcRenderer } from 'electron';
import { switchPage } from '../CustomEvents';


export default class GameServer {
  constructor(
    public profile:GameServerProfile,
    public menuName:string,
    public name:string,
    public shortDescription:string,// the server in 1-2 sentences
    public newsPageUrl:string,
    public backgrounds:{isVideo:boolean,file:string}[],
    public icon:string,
    public socialLinks:socialLink[]
  ){}

  getMenuEntry():HTMLElement{
    const sidebarItem = document.createElement('div');
    sidebarItem.classList.add("sidebarItem");

    //Title
    const title = document.createElement('div');
    title.classList.add("title");

    const titleIMG = document.createElement('img');
    titleIMG.src = `./media/server/${this.icon}`;

    const titleText = document.createElement('div');
    titleText.innerText = this.menuName;

    title.appendChild(titleIMG);
    title.appendChild(titleText);

    title.addEventListener('click', ()=>{
      switchPage("SERVER",this.name);
    });

    sidebarItem.appendChild(title);
    //Collapsable
    const container = document.createElement('div');
    container.classList.add("colapse");

    const info = document.createElement('div');
    info.innerHTML = '<i class="fas fa-info fa-fw"></i>Information';
    container.appendChild(info);

    info.addEventListener('click', ()=>{
      switchPage("SERVER",this.name);
    });

    const news = document.createElement('div');
    news.innerHTML = '<i class="far fa-newspaper fa-fw"></i>News <i class="fas fa-external-link-alt"  data-fa-transform="shrink-2"></i>';
    if(this.newsPageUrl && this.newsPageUrl!==null){
      news.addEventListener('click', ()=>{
        shell.openExternal(this.newsPageUrl);
      });
    } else {
      news.hidden = true;
    }

    container.appendChild(news);

    const screenshots = document.createElement('div');
    screenshots.innerHTML = '<i class="fas fa-camera fa-fw"></i>Screenshots';
    container.appendChild(screenshots);

    screenshots.addEventListener('click', ()=>{
      switchPage("SERVER", this.name, "SCREENSHOTS");
    });

    const preferences = document.createElement('div');
    preferences.innerHTML = '<i class="fas fa-sliders-h fa-fw"></i>Preferences';
    preferences.addEventListener('click', ()=>{
      switchPage("SERVER",this.name,"PREF");
    });
    container.appendChild(preferences);

    sidebarItem.appendChild(container);
    //event Target / interactivity
    const events = document.createElement('span');
    events.classList.add("switch-page-event");
    events.addEventListener("site-changed", (event:CustomEvent)=>{
      sidebarItem.classList.remove("selected");
      info.classList.remove("selected");
      //news.classList.remove("selected");
      screenshots.classList.remove("selected");
      preferences.classList.remove("selected");
      if(event.detail.sitetype === "SERVER" && event.detail.page === this.name){
        sidebarItem.classList.add("selected");
        // if(event.detail.subPage === "NEWS") {
        //   news.classList.add("selected");
        // } else
         if(event.detail.subPage === "PREF") {
          preferences.classList.add("selected");
        } else if(event.detail.subPage === "SCREENSHOTS") {
          screenshots.classList.add("selected");
        } else {
          info.classList.add("selected");
        }
      }
    });

    sidebarItem.appendChild(events);
    return sidebarItem;
  }

  getPage(type:string):HTMLElement{
    const page = document.createElement('div');
    if (typeof(type) === undefined || type == null){
      page.appendChild(this.getInfoPage());
    } else if (type == "SCREENSHOTS"){
      page.appendChild(this.getScreenshotsPage());
    } else if (type == "PREF"){
      page.appendChild(this.getPreferencesPage());
    } else {
      const content = document.createElement('div');
      content.classList.add("unknownServerPage");
      content.innerText = `Unknown page for${this.name}`;
      page.appendChild(content);
    }
    this.updateLoginTextElement();
    return page;
  }

  private getInfoPage():HTMLElement{
    const content = document.createElement('div');
    content.classList.add("infoServerPage");

    const title = document.createElement('div');
    title.classList.add("title");
    title.innerText = this.name;
    content.appendChild(title);

    const socialContainer = document.createElement('div');
    socialContainer.classList.add("socialContainer");
    setTimeout(()=>{
      this.socialLinks.forEach((link)=>{
        socialContainer.appendChild(link.getHTML());
      });
    }, 5);
    content.appendChild(socialContainer);

    const shrtDsrption = document.createElement('div');
    shrtDsrption.classList.add("shortDescription");
    shrtDsrption.innerText = this.shortDescription;
    content.appendChild(shrtDsrption);

    return content;
  }

  private getPreferencesPage():HTMLElement{
    const content = document.createElement('div');
    content.classList.add("PreferencesPage");

    const title = document.createElement('h2');
    title.innerText = `Preferences for ${this.name}`;
    content.appendChild(title);

    const loginSection = document.createElement('div');
    loginSection.classList.add("LoginSection");
    content.appendChild(loginSection);

    const loginUsername = document.createElement('input') as HTMLInputElement;
    loginUsername.value = localStorage.getItem("2_username_"+this.profile.address);

    const loginPin = document.createElement('input') as HTMLInputElement;
    loginPin.type = "password";
    loginPin.value = localStorage.getItem("2_pin_"+this.profile.address);

    const saveBtn =  document.createElement('button') as HTMLButtonElement;
    saveBtn.innerText = "save";

    saveBtn.addEventListener('click', ()=>{
      localStorage.setItem("2_username_"+this.profile.address, loginUsername.value);
      localStorage.setItem("2_pin_"+this.profile.address, loginPin.value);
      this.updateLoginTextElement();
    });


    loginSection.appendChild(loginUsername);
    loginSection.appendChild(loginPin);
    loginSection.appendChild(saveBtn);

    return content;
  }

  private getScreenshotsPage():HTMLElement{
    const screenshotContainer = document.createElement('div');
    screenshotContainer.classList.add("screenshotsContainer");
    screenshotContainer.id="screenshots";

    ipcRenderer.send('getScreenshots', this.profile.address);

    return screenshotContainer;
  }

  updateLoginTextElement():void{
    const account = localStorage.getItem("2_username_"+this.profile.address);
    const pin = localStorage.getItem("2_pin_"+this.profile.address);
    const element = document.getElementById('LoginText');
    if(account && pin){
      element.innerHTML = `Logged in as <b>${account}</b>`;
    }else{
      element.innerHTML = "Automatic login not set up";
    }
  }

  play(){
    const args:any = JSON.parse(JSON.stringify(this.profile));
    args.username = localStorage.getItem("2_username_"+this.profile.address);
    args.password = localStorage.getItem("2_pin_"+this.profile.address);
    ipcRenderer.send('play', args);
  }
}

export class socialLink {
  constructor(
    public icon:string,// has to be one from font awesome -https://fontawesome.com/icons
    public tooltip:string,
    public url:string
  ){}

  getHTML():HTMLElement{
    //<button onclick="sv.openSocialLink(this)" socialLink="abc"><i class="fa fa-user"></i></button><br>
    const element = document.createElement('button');
    element.onclick = ()=>{this.open()};
    element.innerHTML = `<i class="${this.icon}"></i>`;
    element.title = this.tooltip;
    return element;
  }

  open(){
    console.log("A link was clicked!", this.url);
      if(this.url)
        shell.openExternal(this.url.indexOf("://")!==-1?this.url:`https://${this.url}`);
  }
}

ipcRenderer.on('getScreenshots', (event:any, data:{dir:string, screenshots:string[]}) => {
  console.log(data)
      const screenshots = document.getElementById('screenshots');
      if(screenshots){
        // Display screenshots if that tab is open
        if(data.screenshots.length!==0){
          data.screenshots.forEach((fileName:string)=>{
            const screenshot = document.createElement("div");
            screenshot.classList.add("screenshot");
            screenshots.appendChild(screenshot);
            const img = document.createElement("img");
            img.src = data.dir+fileName;
            screenshot.appendChild(img);

            // const text = document.createElement("span");
            // text.innerText = fileName;
            // screenshot.appendChild(text);
            screenshot.addEventListener('dragstart', (event) => {
              event.preventDefault()
              ipcRenderer.send('dragFileOut', data.dir+fileName)
            })

          });
        } else {
          const nothingHere = document.createElement("p");
          nothingHere.classList.add("nothingHere");
          nothingHere.innerText = "There is nothing here, yet. Make some screenshots in Game and come back here. The default key for snaping screenshots is 'P'."

          screenshots.appendChild(nothingHere);
        }

        const openFolderButton = document.createElement('button');
        openFolderButton.innerText = "Open folder to see all";
        openFolderButton.addEventListener('click', ()=>{
          shell.showItemInFolder(data.dir);
        });
        screenshots.appendChild(openFolderButton);
      }
})