<template>
  <div class="row q-pa-lg items-center justify-evenly q-col-gutter-md">
    <div class="col-12" :style="{ 'max-width': '400px' }">
      <q-card flat bordered>
        <q-card-section horizontal>
          <q-card-section>
            <div class="text-h5 q-mt-sm q-mb-xs">New Game</div>
            <div class="text-caption text-grey">
              Add a new game
            </div>
          </q-card-section>

          <q-space></q-space>

          <q-card-section class="col-5 flex flex-center">
            <q-avatar square size="100px">
              <q-icon name="add" size="4rem"/>
            </q-avatar>
          </q-card-section>
        </q-card-section>

        <q-separator />

        <q-card-actions>
          <q-btn flat color="green" label="Add" />

          <q-space/>

          <q-btn flat color="blue" icon="upload" label="Import" />
        </q-card-actions>
      </q-card>
    </div>
  </div>

  <div class="row q-pa-lg items-center justify-evenly q-col-gutter-md">
    <div class="col-12">
      <div class="row items-center justify-evenly">
        <div class="col-4">
          <q-input filled v-model="search" label="Search for games..." />
        </div>
      </div>
    </div>

    <div class="col" v-for="(game, index) of filtered_games" :key="game.id" :style="{ 'max-width': '500px' }">
      <q-card flat bordered>
        <q-card-section horizontal>
          <q-card-section>
            <div class="text-h5 q-mt-sm q-mb-xs">{{ game.name }}</div>
            <div class="text-caption text-grey">
              {{ game.short_description }}
            </div>
          </q-card-section>

          <q-space></q-space>

          <q-card-section class="col-5 flex justify-end">
            <q-avatar square size="100px">
              <q-img
                :src="`https://picsum.photos/200/200?_=${index}`"
                width="100%"
                height="100%"
              />
            </q-avatar>
          </q-card-section>
        </q-card-section>

        <q-separator />

        <q-card-actions>
          <q-btn flat icon="help" @click="selected_game = game">
            <q-tooltip>
              Learn more...
            </q-tooltip>
          </q-btn>
          <q-btn flat icon="edit" color="green">
            <q-tooltip>
              Edit
            </q-tooltip>
          </q-btn>
          <q-btn flat icon="delete" color="red">
            <q-tooltip>
              Delete
            </q-tooltip>
          </q-btn>

          <q-space/>

          <q-btn flat color="blue" icon="download" label="Export" />
        </q-card-actions>
      </q-card>
    </div>
  </div>

  <q-dialog v-model="learn_more">
    <q-card style="min-width: 700px; max-width: 80vw; min-height: 10vh; max-height: 80vh;">
      <q-card-section class="row items-start">
        <div class="col-2">
          <q-avatar square size="200px">
            <q-img
              src="https://picsum.photos/200/200"
              width="100%"
              height="100%"
            />
          </q-avatar>
        </div>
        <div class="col-6">
          <div class="text-h3">{{ selected_game?.name }}</div>
          <div class="text-h6 text-grey">
            {{ selected_game?.short_description }}
          </div>
        </div>
      </q-card-section>

      <q-card-section class="q-pt-none">
        <MarkdownRenderer :text="selected_game?.description"/>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
import type {
	BingoGame
} from '@/js/Bingo.js';
import {
	games
} from '@/js/ParseGamesJSON.js';

@Component
class EditorComponent extends Vue {
	games: BingoGame[] = Array.from(games.values());

	selected_game: BingoGame | undefined = undefined;

	@Watch('selected_game')
	onSelectedGameChange(newGame: BingoGame | undefined) {
		if (newGame)
			this.learn_more = true;
	}

	learn_more: boolean = false;

	@Watch('learn_more')
	onPopupClose(newValue: boolean) {
		if (!newValue)
			this.selected_game = undefined;
	}

	search: string = '';

	get filtered_games(): BingoGame[] {
		return this.games.filter(game => game.name.toLocaleLowerCase().includes(this.search.toLocaleLowerCase()));
	}
}
export default toNative(EditorComponent);
</script>
