<script lang="ts">
  import { invoke } from "@tauri-apps/api/tauri";
  import MainWrapper from "./lib/MainWrapper.svelte";
  import DamageCalculator from "./lib/DamageCalculator.svelte";
  import "carbon-components-svelte/css/g80.css";
  import type { ItemData } from "./model/ItemData";
  import type { PokemonStatus } from "./model/PokemonStatus";
  let items: ItemData[] = [];
  let player1Data: PokemonStatus | undefined;
  let player2Data: PokemonStatus | undefined;
  let attackId: number | undefined;
  invoke("get_items").then((r: ItemData[]) => {
    items = r;
  });
</script>

<main class="container">
  <div class="main-row">
    <div class="column-1">
      <MainWrapper bind:pokemonStatus={player1Data} bind:attackId {items} />
    </div>
    <div class="column-2">
      <MainWrapper bind:pokemonStatus={player2Data} bind:attackId {items} />
    </div>
  </div>
  <div class="row">
    <DamageCalculator bind:player1Data bind:player2Data bind:attackId />
  </div>
</main>

<style>
  .column-1 {
    padding-top: 10px;
    width: 50%;
    border-right: 1px solid white;
  }
  .column-2 {
    padding-top: 10px;
    width: 50%;
    border-left: 1px solid white;
  }
  .main-row {
    display: flex;
    flex-direction: row;
    height: 800px;
  }
</style>
