<script>
  const wifiState = {
    0: "не подключено",
    1: "нет сигнала",
    2: "очень низкий",
    3: "низкий",
    4: "хороший",
    5: "очень хороший",
    6: "отличный",
  };

  const systemErrorsRus = {
    mqtt: {
      e1: {
        descr: "Ошибка mqtt",
        color: "text-red-500",
        txt: "Нет ответа от сервера",
        cancel: false,
      },
      e2: {
        descr: "Ошибка mqtt",
        color: "text-red-500",
        txt: "Соединение было разорвано",
        cancel: false,
      },
      e3: {
        descr: "Ошибка mqtt",
        color: "text-red-500",
        txt: "Ошибка соединения. Обычно возникает когда неверно указано название сервера MQTT",
        cancel: false,
      },
      e4: {
        descr: "Ошибка mqtt",
        color: "text-red-500",
        txt: "Клиент был отключен",
        cancel: false,
      },
      e6: {
        descr: "Ошибка mqtt",
        color: "text-red-500",
        txt: "Ошибка версии",
        cancel: false,
      },
      e7: {
        descr: "Ошибка mqtt",
        color: "text-red-500",
        txt: "Отклонен идентификатор",
        cancel: false,
      },
      e8: {
        descr: "Ошибка mqtt",
        color: "text-red-500",
        txt: "Не могу установить соединение",
        cancel: false,
      },
      e9: {
        descr: "Ошибка mqtt",
        color: "text-red-500",
        txt: "Неправильное имя пользователя/пароль",
      },
      e10: {
        descr: "Ошибка mqtt",
        color: "text-red-500",
        txt: "Не авторизован для подключения",
        cancel: false,
      },
      e11: {
        descr: "Ошибка mqtt",
        color: "text-red-500",
        txt: "Название сервера пустое",
        cancel: false,
      },
      e12: {
        descr: "Ошибка mqtt",
        color: "text-red-500",
        txt: "Имя пользователя или пароль пустые",
        cancel: false,
      },
      e13: {
        descr: "Mqtt",
        color: "text-red-500",
        txt: "Подключение в процессе",
        cancel: false,
      },
    },
    wse1: {
      1: {
        descr: "Ошибка веб сокетов",
        color: "text-red-500",
        txt: "Слишком много клиентов было открыто. Допускается не более четырех.",
        cancel: true,
      },
    },
    jse1: {
      1: {
        descr: "Ошибка json",
        color: "text-red-500",
        txt: "Недостаточный размер буфера библиотеки Arduino Json. Устройство может вести себя непредсказуемо. Обратитесь к разработчику.",
        cancel: true,
      },
    },
    jse2: {
      1: {
        descr: "Ошибка json",
        color: "text-red-500",
        txt: "Ошибка записи/чтения json. Устройство может вести себя непредсказуемо. Обратитесь к разработчику.",
        cancel: true,
        num: true,
      },
    },
    jse3: {
      1: {
        descr: "Ошибка json",
        color: "text-red-500",
        txt: "Ошибка чтения файла json с виджетами",
        cancel: true,
      },
    },
  };

  import Card from "../components/Card.svelte";
  import Alarm from "../components/Alarm.svelte";
  export let version;

  export let errorsJson;

  export let rebootEsp = () => {};

  export let versionsList;
  export let choosingVersion;

  export let startUpdate = () => {};

  export let show;

  export let cancelAlarm = (alarmKey) => {};
</script>

{#if show}
  <div class="grd-2col1">
    <Card title="Системная информация">
      <div class="crd-itm-psn">
        <div class="w-3/4">
          <p class="wgt-dscr-stl">Название прошивки</p>
        </div>
        <div class="flex justify-center w-1/4">
          <p class="text-gray-500 font-bold">{errorsJson.bn}</p>
        </div>
      </div>
      <div class="crd-itm-psn">
        <div class="w-3/4">
          <p class="wgt-dscr-stl">Версии прошивки на сервере</p>
        </div>
        <div class="flex justify-center w-1/4">
          <select class="border border-indigo-500 border-4" bind:value={choosingVersion}>
            {#each Object.entries(versionsList) as [key, param]}
              <option value={param}>
                {param}
              </option>
            {/each}
          </select>
        </div>
      </div>
      <div class="crd-itm-psn">
        <div class="w-3/4">
          <p class="wgt-dscr-stl">Версия прошивки</p>
        </div>
        <div class="flex justify-center w-1/4">
          <p class="text-gray-500 font-bold">{errorsJson.bver}</p>
        </div>
      </div>
      <div class="crd-itm-psn">
        <div class="w-3/4">
          <p class="wgt-dscr-stl">Версия файловой системы</p>
        </div>
        <div class="flex justify-center w-1/4">
          <p class="text-gray-500 font-bold">{version}</p>
        </div>
      </div>
      <div class="crd-itm-psn">
        <div class="w-3/4">
          <p class="wgt-dscr-stl">Uptime устройства</p>
        </div>
        <div class="flex justify-center w-1/4">
          <p class="text-gray-500 font-bold">{errorsJson.upt}</p>
        </div>
      </div>
      <div class="crd-itm-psn">
        <div class="w-3/4">
          <p class="wgt-dscr-stl">Uptime сессии mqtt</p>
        </div>
        <div class="flex justify-center w-1/4">
          <p class="text-gray-500 font-bold">{errorsJson.uptm}</p>
        </div>
      </div>
      <div class="crd-itm-psn">
        <div class="w-3/4">
          <p class="wgt-dscr-stl">Качество WiFi сигнала</p>
        </div>
        <div class="flex justify-center w-1/4 text-xs sm:text-sm md:text-base lg:text-base xl:text-base 2xl:text-base break-words">
          {#if errorsJson.rssi === 0}
            <p class="text-red-500 font-bold">не подключено</p>
          {/if}
          {#if errorsJson.rssi === 1}
            <p class="text-red-500 font-bold">нет сигнала</p>
          {/if}
          {#if errorsJson.rssi === 2}
            <p class="text-red-500 font-bold">очень низкий</p>
          {/if}
          {#if errorsJson.rssi === 3}
            <p class="text-yellow-500 font-bold">низкий</p>
          {/if}
          {#if errorsJson.rssi === 4}
            <p class="text-yellow-500 font-bold">хороший</p>
          {/if}
          {#if errorsJson.rssi === 5}
            <p class="text-green-500 font-bold">очень хороший</p>
          {/if}
          {#if errorsJson.rssi === 6}
            <p class="text-green-500 font-bold">отличный</p>
          {/if}
        </div>
      </div>
      <div class="crd-itm-psn">
        <div class="w-3/4">
          <p class="wgt-dscr-stl">Остаток оперативной памяти</p>
        </div>
        <div class="flex justify-center w-1/4">
          <p class="text-green-500 font-bold">{errorsJson.heap}</p>
        </div>
      </div>
      <div class="crd-itm-psn">
        <div class="w-3/4">
          <p class="wgt-dscr-stl">Количество записей на flash</p>
        </div>
        <div class="flex justify-center w-1/4">
          <p class="text-green-500 font-bold">{errorsJson.fl}</p>
        </div>
      </div>
    </Card>
    <Card title="Системные ошибки">
      <div class="grd-2col1">
        <!--ошибки-->
        {#each Object.entries(errorsJson) as [key, param]}
          {#if key in systemErrorsRus && param in systemErrorsRus[key]}
            <Alarm title={systemErrorsRus[key][param].descr} cross={systemErrorsRus[key][param].cancel} close={() => cancelAlarm(key)}>
              <p class="break-words text-center">{systemErrorsRus[key][param].txt}</p>
              {#if systemErrorsRus[key][param].num}
                <p class="break-words text-center">{"Количество: " + errorsJson[key + "n"]}</p>
              {/if}
            </Alarm>
          {/if}
        {/each}
      </div>
    </Card>
  </div>
  <div class="grd-1col1">
    <Card>
      <div class="grd-2col1">
        <button class="btn-lg" on:click={() => startUpdate()}>{"Обновить прошивку"}</button>
        <button class="btn-lg" on:click={() => rebootEsp()}>{"Перезагрузить устройство"}</button>
      </div>
    </Card>
  </div>
{:else}
  <Alarm title="Загрузка..." />
{/if}
