<script setup lang="ts">

// import pkg from '@xterm/xterm';
// const { Terminal } = pkg;

import { Terminal } from '@xterm/xterm';
// const { Terminal } = pkg;

const term = new Terminal({ rows: 15 });

const {
  isConnected,
  flashProgress,
  status,
  error,
  connect,
  flash,
  disconnect,
  reset
} = useEspFlasher(term);

const { theme } = useTheme();
const { getManifest } = useManifest();

const eraseFlash = ref(false);

const selectedDevice = ref();
const advancedSettings = ref({
  hasFrontlight: false,
  displayColors: 'black-on-white'
});

const startFlashing = async () => {
  const manifest = await getManifest(
    selectedDevice.value,
    advancedSettings.value.customize,
    advancedSettings.value.hasFrontlight,
    advancedSettings.value.displayColors
  );
  await flash(manifest, eraseFlash.value);
};

const webSerialSupport = ref(false)

onMounted(() => {

  term.open(document.getElementById('xterm-terminal'));
  // const userAgent = navigator.userAgent.toLowerCase()
  // const isChromium = /chrome|chromium|crios|edge/i.test(userAgent)
  webSerialSupport.value =  'serial' in navigator
})

</script>

<template>
  <div class="container mx-auto p-4">
    <div class="text-center mb-8">
      <h1 class="text-4xl font-bold mb-2">BTClock Web Flasher</h1>
      <p class="text-gray-600 dark:text-gray-400">Flash your BTClock directly from the browser</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <DeviceSelector @update:device="selectedDevice = $event" class="row-span-2" />

      <div class="card bg-base-100 shadow-xl ">
        <div class="card-body">
          <h2 class="card-title">Connection Status</h2>

          <FlashProgress :progress="flashProgress" />

          <div v-if="error" class="alert alert-error mt-4">
            {{ error }}
          </div>

          <div class="card-actions justify-stretch place-items-center" v-if="webSerialSupport">
            <div class="justify-start grow">{{ status || 'Not connected' }}</div>

            <div class="form-control">
              <label class="label cursor-pointer">
                <span class="label-text">Erase flash</span>
                &nbsp;
                <input type="checkbox" v-model="eraseFlash" class="checkbox" />
              </label>
            </div>
            <button class="btn btn-primary" @click="startFlashing" v-if="isConnected"
              :disabled="!isConnected || (flashProgress != 0 && flashProgress != 100) || selectedDevice === undefined">
              Start Flashing
            </button>
            <button class="btn btn-primary" @click="isConnected ? disconnect() : connect()"
              :class="{ 'btn-success': isConnected }">
              {{ isConnected ? 'Disconnect' : 'Connect' }}
            </button>
            <button v-if="isConnected" class="btn btn-secondary" @click="() => { reset() }">
              Reset
            </button>
          </div>
          <div v-else>
            <div role="alert" class="alert alert-error">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none"
                viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              <span>The flasher is not available because your browser does not support Web Serial.<br>Open this page in Google Chrome, Chromium, Brave or Microsoft Edge instead.</span>
            </div>
          </div>
        </div>
      </div>

      <VersionInformation></VersionInformation>


      <AdvancedSettings @update:settings="advancedSettings = $event" />


      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <h2 class="card-title">Console</h2>

          <div id="xterm-terminal"></div>

        </div>
      </div>



    </div>
  </div>
</template>
