import '@tabler/core/dist/css/tabler.css';
import '@tabler/core/dist/js/tabler.min';
import '@tabler/icons-webfont/dist/tabler-icons.min.css';
import './app.css';
import {Exit, GetConfig, SaveConfig} from '../wailsjs/go/main/App';
import {config} from '../wailsjs/go/models';

function getServers($form: HTMLFormElement) {
    const formData = new FormData($form);
    const entries = Object.fromEntries(formData.entries());
    let servers = new Array<string>;
    for (const key in entries) {
        const address = entries[key] as string;
        if (address) {
            servers.push(address);
        }
    }
    return servers
}

// 显示渲染异常
function showPanicError() {
    document.body.innerHTML = `<b>Panic Error</b>`;
}

// 显示引导设置完毕界面
function showBootstrapDone($container: Element) {
    $container.innerHTML = `
        <div id="app-prepare-done">
            <div class="card card-md">
                <div class="card-body">
                    <h2 class="mb-3">完成配置</h2>
                    <p class="text-secondary mb-4">所有配置均已完成，客户端需要重新启动后才可正常使用。点击下方<b>退出</b>按钮继续
                    </p>
                    <div class="my-4">
                        <button class="btn btn-success w-100" id="app-exit"> 退出 </button>
                    </div>
                    <p class="text-secondary">退出后请在桌面找到客户端图标重新打开即可</p>
                </div>
            </div>
        </div>    
    `
    const $exitBtn = document.getElementById('app-exit') as HTMLElement;
    $exitBtn?.addEventListener('click', (_e) => {
        Exit().then()
    })
}

// 显示引导设置界面
function showBootstrapView($container: Element) {
    $container.innerHTML = `
<div id="app-prepare">
   <div class="card card-md">
      <div class="card-body text-center py-4 p-sm-5">
         <img src="../src/assets/fonts/illustrations/download.svg" height="250" width="250" alt="index">
         <h1 class="mt-3">快速开始</h1>
         <p class="text-secondary">
            欢迎使用山东西曼克技术有限公司 ( SIMANC ) 开发的穿梭车立体仓库调度系统 ( WCS )
         </p>
      </div>
      <div class="hr-text hr-text-center hr-text-spaceless">设置</div>
      <div class="card-body">
         <form id="serverForm" novalidate>
            <div class="mb-2">
               <label class="form-label required" for="server1">主服务器地址</label>
               <div class="input-group input-group-flat">
                  <span class="input-group-text">http://</span>
                  <input type="text" name="server1" id="server1" class="form-control ps-1" autocomplete="off" placeholder="192.168.111.200:80" required>
               </div>
               <div class="form-hint">
                  请输入 WCS 部署在内网的服务器 IP 地址
               </div>
            </div>
            <div class="accordion accordion-flush" id="accordion-flush">
               <div class="accordion-item">
                  <div class="accordion-header">
                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1-flush" aria-expanded="false">
                     备用服务器(可选)
                     <span class="accordion-button-toggle"><i class="ti ti-chevron-down"></i></span>
                     </button>
                  </div>
                  <div id="collapse-1-flush" class="accordion-collapse collapse" data-bs-parent="#accordion-flush" style="">
                     <div class="accordion-body">
                        <div class="input-group input-group-flat">
                           <span class="input-group-text">http:// </span>
                           <input type="text" name="server2" id="server2" class="form-control ps-1" autocomplete="off" placeholder="192.168.111.201:80">
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </form>
      </div>
   </div>
   <div class="row align-items-center mt-3">
      <div class="col-4">
         <div class="progress progress-1">
            <div class="progress-bar" style="width: 25%" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" aria-label="25% Complete">
               <span class="visually-hidden">25% Complete</span>
            </div>
         </div>
      </div>
      <div class="col">
         <div class="btn-list justify-content-end">
            <button class="btn btn-primary btn-2" id="formNext"> 下一步 </button>
         </div>
      </div>
   </div>
</div>    
    `

    const $form = $container.querySelector('#serverForm') as HTMLFormElement;
    const $formNext = $container.querySelector('#formNext');
    $formNext?.addEventListener('click', (_e) => {
        if (!$form.reportValidity()) {
            console.log('校验失败');
            return;
        }
        const servers = getServers($form);
        SaveConfig({ servers }).then(() => {
            showBootstrapDone($container)
        })
    })
}

// 加载服务器时的 Loading
function showServerLoading($container: Element) {
    $container.innerHTML = `
        <div id="app-loading">
            <div class="text-center">
                <div class="text-secondary mb-3">正在加载</div>
                <div class="progress progress-sm">
                    <div class="progress-bar progress-bar-indeterminate"></div>
                </div>
            </div>
        </div>    
    `
}

function setURL(server: string) {
    document.location.replace(`http://${server}`)
}

// main 函数
document.addEventListener('DOMContentLoaded', () => {
    const $container = document.querySelector('.container');
    if (!$container) {
        showPanicError();
        return;
    }
    // 先尝试获取配置文件, 如果配置文件不存在, 则表明为首次加载
    GetConfig().then((config: config.Config) => {
        console.log(config);
        showServerLoading($container)
        // TODO 需要选取服务器地址后再设定
        setURL(config.servers[0])
    }).catch((error: Error) => {
        // 显示引导
        console.log(`首次启动: ${error}`);
        showBootstrapView($container)
    })
})