<template>
<div class="character-select-screen">
  <div class="ui-wrapper">
    <div class="characters-wrapper">
      <div v-for="character in characters" :key="character.id" class="character">
        <input type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
        <label :for="character.id">
          {{ character.name }}
          <img src="/assets/avatar/default/base_right_down.png" />
        </label>
      </div>
    </div>

    <div class="buttons-wrapper">
      <button @click="select_character()">Play</button>
      <button @click="isModalOpen = true">Create New</button>
    </div>
  </div>
</div>

<Modal :isModalOpen="isModalOpen">
  <template #modal-header>
    <h2 class="modal-title">Create your character</h2>
  </template>
  <template #modal-body>
    <form method="post" @submit.prevent="create" class="modal-form">
      <div class="form-fields">
        <label for="name">Name</label>
        <input v-model="name" name="name" id="name">
      </div>
      <div class="submit">
        <button @click="create">Create</button>
      </div>
    </form>
    <button @click="isModalOpen = false">Cancel</button>
  </template>
</Modal>
</template>

<script setup lang="ts">
import { useSocketStore } from '@/stores/socket'
import { ref } from 'vue'
import type { Character } from '../../../env'
import Modal from '@/components/utilities/Modal.vue'

const socket = useSocketStore();

// Fetch characters
socket.getConnection.emit('character:list');
socket.getConnection.on('character:list', (data: any) => {
  console.log(data);
  characters.value = data;
});

// Select character logics
const characters = ref([]);
const selected_character = ref(null);
function select_character() {
  console.log(selected_character.value);
  if (selected_character.value) {
    socket.getConnection.emit('character:connect', {character_id: selected_character.value});
    socket.getConnection.on('character:connect', (data: Character) => socket.setCharacter(data));
  }
}

// Create character logics
const isModalOpen = ref(false);
let name: any = ref('');
function create() {
  socket.getConnection.emit('character:create', { name: name.value });
  name.value = '';
  isModalOpen.value = false;
}
</script>

<style lang="scss">
@import '@/assets/scss/main';

.character-select-screen {
  background-image: url("/assets/bglogin.png");
  .ui-wrapper {
    // vertical and vertical center
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6.25rem;
    padding: 0 5rem;
    &::before {
      content: '';

    }

    .characters-wrapper {
      display: flex;
      justify-content: center;
      gap: 5rem;
      width: 100%;

      .character {
        min-width: 150px;
        min-height: 250px;
        display: flex;
        flex-direction: column;
        background-color: rgba($white, 0.8);
        border-radius: 20px;
        position: relative;
        &::before {
          content: '';
          position: absolute;
          width: 100%;
          height: 40px;
          background-color: rgba($purple, 0.6);
          border-radius: 20px 20px 0 0;
        }

        // hide the radio buttons
        input[type="radio"] {
          display: none;
        }

        // img under the label
        label {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: auto;
        }

        // for selected radio, give bg color
        input[type="radio"]:checked + label {
          background: rgba($purple, 0.6);
          padding: 5px;
        }
      }
    }

    .buttons-wrapper {
      display: flex;
      gap: 30px;
      button {
        padding: 10px 16px;
        &:hover {
          cursor: pointer;
        }
      }
    }
  }

  .modal-title {
    margin: 0;
  }
}



</style>