<script setup lang="ts">
import BeltBlock from './BeltBlock.vue';
import { apiLetsgo } from './client';
import MetalPlate from './MetalPlate.vue';
import HeaderText from './HeaderText.vue';
import { ref } from 'vue';

const place = ref("")

interface Props {
  gameState: string
  login: string
  password: string
}
const props = withDefaults(defineProps<Props>(), {})

const isPlaceFilled = defineModel<boolean>();

async function addAction() {
  isPlaceFilled.value = true
  const placeValue = place.value.trim()
  if (placeValue === "") {
    place.value = ""
    return
  }
  await apiLetsgo(props.login, props.password, placeValue)
  place.value = ""
}
</script>

<template>
  <div class="form-custom">
    <BeltBlock class="input-form">
      <MetalPlate class="controller-metal controller-metal-left"></MetalPlate>
      <MetalPlate class="controller-metal controller-metal-right"></MetalPlate>
      <div class="center-block-custom">
        <form @submit.prevent="addAction">
          <div class="controller">
            <div class="game-input">
              <input id="run" class="game-input-run" v-model="place" type="text" placeholder="Место назначения"
                :disabled="props.gameState !== 'RUN'">
            </div>
            <div class="game-button-run-shadow"></div>
            <button class="game-button-run" type="submit" :disabled="props.gameState !== 'RUN'">
              <HeaderText>Поехали</HeaderText>
            </button>
          </div>
        </form>
      </div>
    </BeltBlock>
  </div>
</template>

<style scoped>
.form-custom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  color: white;
  z-index: 1000;
}

.input-form {
  height: 76px;
  position: relative;
  z-index: 1000;
}

.controller-metal {
  width: 30px;
  height: calc(100% + 2px);
  position: absolute;
  top: -1px;
}

.controller-metal-left {
  left: -15px;
}

.controller-metal-right {
  right: -15px;
}

.controller {
  display: flex;
  position: relative;
}

.game-input {
  position: relative;
  top: 14px;
  left: 25px;
  height: 50px;
  width: calc(100% - 150px - 35px);
}

.game-input-run {
  height: 100%;
  width: 100%;
  padding-left: 27px;
  background-image: url("@/assets/input_center.png");
  background-size: cover;
  border: 0;
  font-size: 18px;
  font-family: a_OldTyper;
  background-color: transparent;
}

.game-input-run::placeholder {
  color: #333333;
}

.game-input-run:focus {
  border: 0;
  outline: none;
}

.game-button-run-shadow {
  position: absolute;
  right: 10px;
  top: -5px;
  height: 80px;
  width: 150px;
  box-shadow: -5px 5px 10px black;
}

.game-button-run {
  background-image: url("@/assets/button.png");
  background-size: cover;
  font-size: 1.5em;
  position: absolute;
  right: 10px;
  top: -5px;
  height: 80px;
  width: 155px;
  border: 0;
  background-color: transparent;
  margin: 0;
  padding: 0;
}

.game-button-run:hover {
  /* TODO */
}

.game-button-run:disabled {
  /* TODO */
}
</style>
