<script setup lang="ts">
import type { MatchSessionOptions } from '@/common/interfaces'
import type { InfoService } from '@/services/InfoService'
import { computed, inject, ref } from 'vue'

const emit = defineEmits(['createMatch', 'startSingleMatch'])
const info = inject<InfoService>('info')

let options = ref<MatchSessionOptions>({
  background: 'green',
  teamed: false,
  winType: 'points',
  winTarget: 100,
  seed: '',
  sessionName: info?.development ? `Test #${Date.now()}` : `Session #${Date.now()}`,
  numPlayers: 1,
  turnWaitSeconds: 30,
})

const winTargetPointsList = [20, 50, 80, 100, 150, 200]
const winTargetRoundsList = [1, 2, 3, 4, 5, 6]
const turnWaitSecondsList = [15, 20, 30, 40, 50, 60]

const backgroundOptiopnList = [
  {
    label: 'green-fabric',
    value: 'green',
  },
  {
    label: 'gray-fabric',
    value: 'gray',
  },
  {
    label: 'blue-fabric',
    value: 'blue',
  },
  {
    label: 'yellow-fabric',
    value: 'yellow',
  },
  {
    label: 'red-fabric',
    value: 'red',
  },
]

const isSinglePlayer = computed(() => options.value.numPlayers === 1)
const isMultiPlayer = computed(() => options.value.numPlayers > 1)

function createMatch() {
  emit('createMatch', options.value)
}

function startSingleMatch() {
  emit('startSingleMatch', options.value)
}
</script>

<template>
  <div>
    <div class="grid">
      <div class="cell">
        <div class="field">
          <label class="label">{{ $t('mode') }}</label>
          <div class="control">
            <div class="buttons has-addons">
              <button
                class="button"
                :class="{ 'is-primary is-selected': isSinglePlayer }"
                @click="
                  () => {
                    console.log('options :>> ', options)
                    options.numPlayers = 1
                  }
                "
              >
                {{ $t('singleplayer') }}
              </button>
              <button
                class="button"
                :class="{ 'is-primary is-selected': isMultiPlayer }"
                @click="
                  () => {
                    console.log('options :>> ', options)
                    options.numPlayers = 2
                  }
                "
              >
                {{ $t('multiplayer') }}
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="cell">
        <div class="field" v-if="isMultiPlayer">
          <label class="label">{{ $t('players-number') }}</label>
          <div class="control">
            <div class="buttons has-addons">
              <button
                class="button is-primary"
                @click="options.numPlayers--"
                :disabled="options.numPlayers <= 2"
              >
                -
              </button>
              <button class="button is-primary" disabled>{{ options.numPlayers }}</button>
              <button
                class="button is-primary"
                @click="options.numPlayers++"
                :disabled="options.numPlayers >= 4"
              >
                +
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="cell">
        <div class="field" v-if="isMultiPlayer">
          <div class="control">
            <label for="teamed" class="checkbox">
              <input v-model="options.teamed" name="teamed" type="checkbox" />
              {{ $t('crossed-game-teamed') }}
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="grid" v-if="info?.development">
      <div class="cell">
        <div class="field">
          <label class="label">{{ $t('session-name') }}</label>
          <div class="control">
            <input
              type="text"
              class="input"
              v-model="options.sessionName"
              placeholder="$t('session-name-placeholder')"
            />
          </div>
        </div>
      </div>
      <!---->
      <div class="cell">
        <div class="field">
          <label class="label">{{ $t('seed') }}</label>
          <div class="control">
            <input
              type="text"
              class="input"
              style="margin-bottom: 0"
              v-model="options.seed"
              :placeholder="$t('seed-placeholder')"
            />
          </div>
        </div>
      </div>
      <!---->
    </div>
    <div class="grid">
      <div class="cell">
        <div class="field">
          <label for="background" class="label">{{ $t('background-color') }}</label>
          <div class="control">
            <div class="select">
              <select v-model="options.background" name="background">
                <option
                  v-bind:key="option.value"
                  v-for="option in backgroundOptiopnList"
                  :value="option.value"
                >
                  {{ $t(option.label) }}
                </option>
              </select>
            </div>
          </div>
        </div>
      </div>
      <div class="cell">
        <div class="field">
          <label for="winTarget" class="label">{{ $t('win-type') }}</label>
          <div class="control">
            <div class="buttons has-addons">
              <button
                class="button"
                :class="{ 'is-primary is-selected': options.winType === 'points' }"
                @click="
                  () => {
                    options.winType = 'points'
                    options.winTarget = 100
                  }
                "
              >
                {{ $t('points') }}
              </button>
              <button
                class="button"
                :class="{ 'is-primary is-selected': options.winType === 'rounds' }"
                @click="
                  () => {
                    options.winType = 'rounds'
                    options.winTarget = 2
                  }
                "
              >
                {{ $t('rounds') }}
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="cell">
        <div class="field">
          <label for="winTarget" class="label">{{ $t('points-to-win') }}</label>
          <div class="control">
            <div class="select" v-if="options.winType === 'points'">
              <select v-model="options.winTarget" name="winTarget">
                <option
                  v-bind:key="winTarget"
                  v-for="winTarget in winTargetPointsList"
                  :value="winTarget"
                >
                  {{ $t('n-points', winTarget) }}
                </option>
              </select>
            </div>
            <div class="select" v-if="options.winType === 'rounds'">
              <select v-model="options.winTarget" name="winTarget">
                <option
                  v-bind:key="winTarget"
                  v-for="winTarget in winTargetRoundsList"
                  :value="winTarget"
                >
                  {{ $t('n-of-m-rounds', [winTarget, winTarget * 2 - 1]) }}
                </option>
              </select>
            </div>
          </div>
        </div>
      </div>
      <div class="cell">
        <div class="field">
          <label for="winTarget" class="label">Turn Wait</label>
          <div class="control">
            <div class="select">
              <select v-model="options.turnWaitSeconds" name="turnWait">
                <option
                  v-bind:key="turnWait"
                  v-for="turnWait in turnWaitSecondsList"
                  :value="turnWait"
                >
                  {{ turnWait }} seconds
                </option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="buttons mt-6">
      <button class="button is-primary" @click.prevent="createMatch" v-if="isMultiPlayer">
        {{ $t('create-match-session') }}
      </button>
      <button class="button is-primary" @click.prevent="startSingleMatch" v-if="isSinglePlayer">
        {{ $t('start-game') }}
      </button>
    </div>
  </div>
</template>

<style scoped></style>
