<script>
import logo from "./assets/images/logo-universal.png";
import { 
	GetStatus, 
	Weed, 
	GetProjects, 
	StartFar, 
	GetDisks,
	GetDownloads,
  StartFarDownloads} from "../wailsjs/go/main/App.js";

import { StartServer } from "../wailsjs/go/main/App.js";
import TailwindCss from "./TailwindCSS.svelte";
import servers from "./servers.js";
// import {BrowserOpenURL} from '../wailsjs/runtime/runtime.js'

let resultText = "Ваше имя 👇";
let local = servers;
let projects = [];
let disks = [];
let downloads = "";
let cnt_pic = "0";
let normal = true;
let pics = true; 

function get_disks() {
	console.log("get disks")
	GetDisks().then((result) => {
		console.log("получена информация о дисках:", result)
		disks = result
		disks[0].normal = disks[0].Free > 20;
		disks[1].normal = disks[1].Free > 50;
	})
}

function get_downloads() {
	console.log("get downloads")
	GetDownloads().then((result) => {
		console.log("получена информация о downloads:", result)
		downloads = result
	})
}

function start_far(project) {
  StartFar(project.last_directory_path)
}

function far_downloads() {
  StartFarDownloads()
}

function start_server(server) {
	let s = JSON.stringify(server);
	console.log(s);
	StartServer(s).then((result) => {
		resultText = result;
		console.log(resultText);
		server.run = "running";
		local = local;
	});
}

function weed() {
	// console.log("weed");
	Weed().then(() => {
		get_status();
	});
}

function get_status() {
	console.log("запрос downloads");
	get_downloads()

	console.log("запрос дисков");
	get_disks()

	console.log("запрос статуса");
	GetStatus().then((result) => {
		console.log("result:", result);
		cnt_pic = result;
		// сразу сбросим признак работающего сервера
		local = local.map((server) => {
			server.run = "idle";
			return server;
		});
	});

	console.log("запрос проектов");
	GetProjects().then((result) => {
		console.log("projects:", result);
		projects = result;
	});
}

get_status();
</script>

<TailwindCss />

<div class="container mx-auto pt-4 mb-4">
  <div class="disk-panel text-neutral-300">
  {#each disks as disk}
  	<div>
  		{disk.Name} 
		<span class={disk.normal ? 'info' : 'danger'}>{disk.Free} Gb</span>
  	</div>
  {/each}
  </div>
</div>

<div class="container mx-auto pt-4 mb-4">
  <h1 class="text-blue-200 text-2xl">СЕРВЕРА</h1>
  {#each local as server}
    <div class="flex justify-between px-4">
      <button 
        class="text-teal-600 hover:text-teal-200 hover:font-normal hover:underline hover:underline-offset-2 cursor-pointer"
        on:click={ () => start_server(server)}
      >
        {server.name}
      </button>

      <button class="text-neutral-300">
          <span class:text-red-300={server.run === "running"}>
            {server.run}
          </span>
      </button>
    </div>
  {/each}
</div>

<hr class="mb-2 mx-4 text-slate-600"/>

<div class="container mx-auto pt-4 mb-8">
  <h1 class="text-blue-200 text-2xl">УТИЛИТЫ</h1> 
  <div class="flex flex-col h-full justify-between">
    <div class="h-24">
      <div class="flex justify-between px-4">
        <button 
          class="text-teal-600 hover:text-teal-200 hover:font-normal hover:underline hover:underline-offset-2 cursor-pointer"
          on:click={weed}
        >
          Weed (python)
        </button>
        
        <div class="text-neutral-300">
          <span class={pics ? 'warning' : 'info'}>{cnt_pic}</span>
        </div>
      </div> 
	<div class="flex justify-between px-4">
		<button 
          class="text-teal-600 hover:text-teal-200 hover:font-normal hover:underline hover:underline-offset-2 cursor-pointer"
          on:click={far_downloads}
        >
          Download
        </button>
        <div class="text-neutral-300">
          <span class="info">{downloads}</span>
        </div>
	</div>
    </div>  
  </div>
</div>

<hr class="mb-2 mx-4 text-slate-600"/>

<div class="container mx-auto pt-4 mb-8">
  <h1 class="text-blue-200 text-2xl">ПРОЕКТЫ</h1> 
  {#each projects as project}
    <div class="flex justify-between px-4">
      <button 
        class="text-teal-600 hover:text-teal-200 hover:font-normal hover:underline hover:underline-offset-2 cursor-pointer"
        on:click={ () => start_far(project) }
      >
        {project.last_directory}
      </button>

      <div class="text-neutral-300">
          <span class="info"> {project.name} </span>
      </div>
    </div>
  {/each}
</div>

<!-- панель кнопок -->    
<button 
  on:click={get_status}
  class="absolute right-4 bottom-4 
    bg-slate-700 hover:bg-slate-500 
    p-2 rounded-full">
  <svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="24" 
    height="24" 
    viewBox="0 0 24 24" 
    fill="none" 
    stroke="currentColor" 
    stroke-width="3" 
    stroke-linecap="round" 
    stroke-linejoin="round" 
    class="feather feather-refresh-ccw  cursor-pointer">
    <polyline points="1 4 1 10 7 10"></polyline><polyline points="23 20 23 14 17 14"></polyline><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path>
  </svg>
</button>

<style>
.disk-panel {
	display: flex;
	justify-content: space-around;
}
.info {
	color: lightgreen; 
}
.danger {
	color: red; 
}
.warning {
	color: orange; 
}
</style>
