<script lang="ts">
  import { invoke } from "@tauri-apps/api/tauri";
  import AutoComplete from "simple-svelte-autocomplete";
  import DisplayData from "./DisplayData.svelte";
  import type { PokemonStatus } from "../model/PokemonStatus";
  import type { PokemonDBData, PokemonData } from "src/model/PokemonData";
  import type { ItemData } from "../model/ItemData";
  $: {
    if (myValue > 0) {
      invoke("search", { index: myValue }).then((r: PokemonDBData) => {
        pokemonData = {
          id: r.id,
          name: r.name,
          types: r.types,
          thumbnail: r.thumbnail,
          abilities: r.abilities,
          hp: r.hp,
          attack: r.attack,
          defense: r.defense,
          special_attack: r.special_attack,
          special_defense: r.special_defense,
          speed: r.speed,
          hp_v: 31,
          attack_v: 31,
          defense_v: 31,
          special_attack_v: 31,
          special_defense_v: 31,
          speed_v: 31,
          hp_d: 0,
          attack_d: 0,
          defense_d: 0,
          special_attack_d: 0,
          special_defense_d: 0,
          speed_d: 0,
          learnset: r.learnset,
          item: 0,
          terastype: [0],
          attack_plus: false,
          attack_minus: false,
          defense_plus: false,
          defense_minus: false,
          special_attack_plus: false,
          special_attack_minus: false,
          special_defense_plus: false,
          special_defense_minus: false,
          speed_plus: false,
          speed_minus: false,
          attack_buff: 0,
          defense_buff: 0,
          special_attack_buff: 0,
          special_defense_buff: 0,
          speed_buff: 0,
        };
        pokemonDataArray[index] = pokemonData;
        myValue = undefined;
      });
    }
    pokemonStatus = {
      types: pokemonData ? pokemonData.types : [],
      terastype: pokemonData ? pokemonData.terastype : [0],
      hp: hp_final,
      attack: attack_final,
      defense: defense_final,
      special_attack: special_attack_final,
      special_defense: special_defense_final,
      speed: speed_final,
      attack_buff: pokemonData ? pokemonData.attack_buff : 0,
      defense_buff: pokemonData ? pokemonData.defense_buff : 0,
      special_attack_buff: pokemonData ? pokemonData.special_attack_buff : 0,
      special_defense_buff: pokemonData ? pokemonData.special_defense_buff : 0,
      speed_buff: pokemonData ? pokemonData.speed_buff : 0,
      item: pokemonData ? pokemonData.item : 0,
    };
  }
  export let attackId: number | undefined;
  export let items: ItemData[];
  let myValue;
  let index = 0;
  let pokemonData: PokemonData | undefined;
  let pokemonDataArray: PokemonData[] = [];
  let hp_final = 0;
  let attack_final = 0;
  let defense_final = 0;
  let special_attack_final = 0;
  let special_defense_final = 0;
  let speed_final = 0;
  export let pokemonStatus: PokemonStatus = {
    types: [],
    terastype: [0],
    hp: 0,
    attack: 0,
    defense: 0,
    special_attack: 0,
    special_defense: 0,
    speed: 0,
    attack_buff: 0,
    defense_buff: 0,
    special_attack_buff: 0,
    special_defense_buff: 0,
    speed_buff: 0,
    item: 0,
  };
  async function getItems(keyword) {
    try {
      let result = await invoke("autosearch", { keyword });
      return result;
    } catch (e) {
      console.log(e);
      return [];
    }
  }
</script>

<div>
  <div class="row">
    <AutoComplete
      showClear={true}
      searchFunction={getItems}
      delay="200"
      localFiltering={false}
      labelFieldName="name"
      valueFieldName="id"
      bind:value={myValue}
    />
  </div>
  <div class="row-display">
    <div class="pokemon-button-div">
      <table class="button-table">
        {#each [0, 1, 2, 3, 4, 5] as i}
          <tr>
            <td>
              <!-- svelte-ignore a11y-click-events-have-key-events -->
              <div
                class="pokemon-button {i == index
                  ? 'active'
                  : i % 2 === 0
                  ? 'odd'
                  : 'even'}"
                on:click={() => {
                  index = i;
                  pokemonData = pokemonDataArray[i];
                }}
              >
                <span class="active-arrow">➤</span>
                {#if pokemonDataArray[i]}
                  <img
                    src={`data:image/png;base64,${pokemonDataArray[i].thumbnail}`}
                    alt={pokemonDataArray[i].name}
                    width="15%"
                  />
                  {pokemonDataArray[i].name}
                {:else}
                  No Pokemon
                {/if}
              </div>
            </td>
          </tr>
        {/each}
      </table>
      <div class="save-load-clear-group">
        <button
          on:click={() => {
            invoke("save_json", { jsonContent: pokemonDataArray})
            .then(() => {})
            .catch((err) => console.log(err));
          }}
        >
          Save
        </button>
        <button
          on:click={() => {
            invoke("load_json").then((d) => {
              // fix this type issue
              pokemonDataArray = d;
              pokemonData = pokemonDataArray[index];
            })
            .catch((e) => console.log(e));
          }}
        >
          Load
        </button><br />
        <button
          on:click={() => {
            pokemonDataArray.forEach((pd) => {
              pd.attack_buff = 0;
              pd.defense_buff = 0;
              pd.special_attack_buff = 0;
              pd.special_defense_buff = 0;
              pd.speed_buff = 0;
              pd.terastype = [0];
            });
            pokemonData = pokemonDataArray[index];
          }}
        >
          Reset Battle Status
        </button><br />
        <button
          on:click={() => {
            pokemonData = undefined;
            pokemonDataArray = [];
            index = 0;
            myValue = undefined;
          }}
        >
          Clear
        </button>
      </div>
    </div>
    <div class="display-data">
      <DisplayData
        {pokemonData}
        bind:hp_final
        bind:attack_final
        bind:defense_final
        bind:special_attack_final
        bind:special_defense_final
        bind:speed_final
        bind:attackId
        {items}
      />
    </div>
  </div>
</div>

<style>
  .save-load-clear-group {
    margin: 15px 0;
    line-height: 40px;
  }
  .row-display {
    height: 759px;
    display: flex;
  }
  .button-table {
    width: 200px;
  }
  .pokemon-button-div {
    width: 200px;
    border-right: 2px solid white;
  }
  .active-arrow {
    display: none;
  }
  .active > .active-arrow {
    display: block;
    margin-right: 5px;
  }
  .display-data {
    width: 800px;
    height: 759px;
    overflow-y: scroll;
  }
  .pokemon-button {
    padding: 10px;
    border-top-left-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    border-right: 2px solid white;
    border-bottom: 1px solid black;
  }
  .active {
    background-color: #d1be01;
    cursor: unset;
    color: black;
    font-weight: bold;
    text-shadow: 1px 1px 1px white;
  }
  .odd {
    color: white;
    background-color: #f7bbb8;
  }
  .odd:hover {
    color: white;
    background-color: #f5453d;
    transition: background-color 0.5s ease;
    cursor: pointer;
  }
  .even {
    color: white;
    background-color: #b6b4ff;
  }
  .even:hover {
    color: white;
    background-color: #3d3094;
    transition: background-color 0.5s ease;
    cursor: pointer;
  }
</style>
