<script lang="ts">
import { createEventDispatcher } from 'svelte';
import {
  create as svgCreate,
  append as svgAppend
} from 'tiny-svg';
import { writable } from 'svelte/store';
import Choices from 'choices.js';

let типОбъекта: 'Прибор' | 'ИсполнительныйМеханизм' = 'Прибор';
let фиксация: 'НаМесте' | 'НаЩите' = 'НаМесте';
let типПрибора: 'Величина' | 'Мультивеличина' = 'Величина';
let величина: 'Напряжение' | 'Температура' = 'Напряжение';
let уточнение: 'ИнтегрированиеСуммированиеПоВремени' | 'РазностьПерепад' | null = null;

interface Функция {
  тип: string;
  значение: string;
}

let функции: Функция[] = [];

export const data = writable({'value': svgCreate('g')});

const функцииПоТипу = {
    ВыполняемаяФункция: [
      'Сигнализация',
      'АвтоматическоеРегулирование',
      'ВеличинаОтклоненияОтЗаданной',
      'Регистрация'],
    ФункциональныйПризнак: [
      'ЧувствительныйЭлемент',
      'Преобразование',
      'ПервичныйПоказывающийПрибор',
      'СтанцияУправления',
      'ВключениеОтключениеПереключение',
      'Преобразование',
      'VДополнительный',
      'ВспомогательныеКомпьютерныеУстройства',
      'ВспомогательныеВычислительноеУстройство',
      'ZДополнительный']};

function addFunction() {
  функции = [...функции, { тип: 'ВыполняемаяФункция', значение: 'Регистрация' }];
}

function removeFunction(index: number) {
  функции = функции.filter((_, i) => i !== index);
}

let являетсяПаз = false;
let ручной = false;
let направление: 'Открывается' | 'Закрывается' | 'ОстаётсяНаМесте' | null = null;


function handleSubmit() {

  data.update(() => ({value: to_svg(0, 0)}));

}

function to_svg(x, y) {
  const r = svgCreate('g');
  if (типОбъекта === 'ИсполнительныйМеханизм') {
    var circle = svgCreate('circle',
    {
      cx: x,
      cy: y - 52,
      r: '2.5mm',
      fill: "none",
      stroke: "CanvasText",
    });

    var line = svgCreate('line',
    {
      x1: x,
      x2: x,
      y1: y,
      y2: y - 42,
      stroke: "CanvasText",
    })

    var h = svgCreate('text',
      x: x,
      y: y,
      
    )

    svgAppend(r, circle);
    svgAppend(r, line); // здесь НЕОБХОДИМО добавить стрелки в разных направлениях TODO
    return r;
  }
  
  if (являетсяПаз) {
    const w = 10;
    const h = 10;
    const outer = svgCreate('polygon', {points: `${x},${y+h} ${x+w},${y} ${x},${y-h} ${x-w},${y}`, stroke:"CanvasText", fill:"Canvas"});
    svgAppend(r, outer);
    const rect  = svgCreate('rect', {x: x-w/2, y: y-h/2, width:w, height: h, stroke:"CanvasText", fill:"Canvas"})
    svgAppend(r, rect);
  } else {
    const circle = svgCreate('circle', {x: x, y: y, r: "5mm", stroke:"CanvasText", fill:"Canvas"});
    svgAppend(r, circle);
  }
  if (фиксация == "НаЩите") {
    const h = svgCreate('line', {x0: x - 5, y0: y, x1: x + 5, y1: y, stroke:"CanvasText"})
    svgAppend(r, h);
  }

  var toText = величина ; // TODO + что-то ещё

  return r;
}


const element = document.getElementById('choices-select');
console.log(element);
if (element !== null) {
  const choices = new Choices(element, {
    searchEnabled: true, // Включить поиск
    shouldSort: false,   // Отключить сортировку (по умолчанию элементы остаются в заданном порядке)
    placeholder: true,   // Включить плейсхолдер (если нужен)
    placeholderValue: 'Выберите величину', // Текст плейсхолдера
  });
}
</script>

<div>
  <label>
    <span>Тип объекта:</span>
    <select bind:value={типОбъекта}>
      <option value="Прибор">Прибор</option>
      <option value="ИсполнительныйМеханизм">Исполнительный механизм</option>
    </select>
  </label>
  <br/>

  {#if типОбъекта === 'Прибор'}
    <label>
      <span>Фиксация:</span>
      <select bind:value={фиксация}>
        <option value="НаМесте">На месте</option>
        <option value="НаЩите">На щите</option>
      </select>
    </label>
    <br/>

    <label>
      <span>Тип прибора:</span>
      <select bind:value={типПрибора}>
        <option value="Величина">Величина</option>
        <option value="Мультивеличина">Мультивеличина</option>
      </select>
    </label>
    <br/>

    <label>
      <span>Величина:</span>
      <select id="choices-select" bind:value={величина}>
        <option value="A">Анализ, качество</option>
        <option value="B">Пламя, горение</option>
        <option value="C">Дополнительная величина</option>
        <option value="D">Дополнительная величина</option>
        <option value="E">Напряжение</option>
        <option value="F">Расход</option>
        <option value="G">Дополнительная величина</option>
        <option value="H">Ручное воздействие</option>
        <option value="I">Ток</option>
        <option value="J">Мощность</option>
        <option value="K">Время</option>
        <option value="L">Уровень</option>
        <option value="M">Дополнительная величина</option>
        <option value="N">Дополнительная величина</option>
        <option value="O">Дополнительная величина</option>
        <option value="P">Давление</option>
        <option value="Q">Количество</option>
        <option value="E">Радиоактивность</option>
        <option value="S">Скорость, частота</option>
        <option value="T">Температура</option>
        <option value="U">Разнородные величины</option> // несколько величин ТОЛЬКО здесь
        <option value="V">Вибрация</option>
        <option value="W">Вес</option>
        <option value="X">Дополнительная величина (нерекомендованная буква)</option>
        <option value="Y">Событие</option>
        <option value="Z">Размер</option>
      </select>
    </label>
    <br/>

    <label>
      <span>Уточнение:</span>
      <select bind:value={уточнение}>
        <option value="ИнтегрированиеСуммированиеПоВремени">Интегрирование</option>
        <option value="РазностьПерепад">Разность</option>
        <option value={null}>Без уточнения</option>
      </select>
    </label>
    <br/>

    <label>
      <input type="checkbox" bind:checked={являетсяПаз} />
      <span>Является паз</span>
    </label>
    <br/>

<strong>Функции<button type="button" on:click={addFunction} class="simplebutton">+</button></strong>
  {#each функции as функция, i}
    <div class="функция-элемент" style="margin-bottom: 10px;">
      <label>
        Тип функции:
        <select bind:value={функция.тип}>
          <option value="ВыполняемаяФункция">Выполняемая функция</option>
          <option value="ФункциональныйПризнак">Функциональный признак</option>
        </select>
      </label>

      <label>
        Значение:
        <select bind:value={функция.значение}>
          {#if функция.тип === 'ВыполняемаяФункция'}
            {#each функцииПоТипу.ВыполняемаяФункция as val}
              <option value={val}>{val}</option>
            {/each}
          {/if}
          {#if функция.тип === 'ФункциональныйПризнак'}
            {#each функцииПоТипу.ФункциональныйПризнак as val}
              <option value={val}>{val}</option>
            {/each}
          {/if}
        </select>
      </label>
      <button type="button" on:click={() => removeFunction(i)} class="simplebutton">-</button>
    </div>
  {/each}


  {:else}
    <label>
      <span>Имеет ручное управление:</span>
      <input type="checkbox" bind:checked={ручной} />
    </label>
    <br/>

    <label>
      <span>Направление:</span>
      <select bind:value={направление}>
        <option value="Открывается">Открывается</option>
        <option value="Закрывается">Закрывается</option>
        <option value="ОстаётсяНаМесте">Остаётся на месте</option>
        <option value={null}>Не указано</option>
      </select>
    </label>
    <br/>
  {/if}
  <br/>
  <button on:click={handleSubmit}>OK</button>
  <br/>
</div>
<style>
.simplebutton {
  width: 40px;               /* Ширина кнопки */
  height: 40px;              /* Высота кнопки должна совпадать с шириной */
  border: 1px solid lightgray;
  margin-left: 5px;
  border-radius: 50%;        /* Делает кнопку круглой */
  display: inline-flex;      /* Для центрирования содержимого */
  justify-content: center;   /* Горизонтальное центрирование */
  align-items: center;       /* Вертикальное центрирование */
  cursor: pointer;           /* Изменение курсора */
}
</style>