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

const code = ref('')

const props = defineProps({
  addAction: {
    type: Function as PropType<(param: string) => void>,
    required: true,
  }
})

async function addClickButton() {
  await props.addAction(code.value)
  code.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-700">
        <div class="controller">
          <div class="game-input">
            <input id="run" class="game-input-run" v-model="code" type="text" placeholder="Место назначения">
          </div>
          <div class="game-button-run-shadow"></div>
          <button class="game-button-run" type="submit" :disabled="code.length == 0" v-on:click="addClickButton">
            <HeaderText>Поехали</HeaderText>
          </button>
        </div>
      </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;
  margin: 0 auto;
  max-width: 1920px;
}

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

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

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

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

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

.game-input-run {
  height: 100%;
  width: 100%;
  padding-left: 27px;
  background-image: url("@/assets/images/input_center.png");
  background-size: cover;
  border: 0;
  font-size: 18px;
  font-family: 'font_old_typer';
  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/images/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 {
  cursor: pointer;
}

@media (min-width: 1025px) {
  .center-block-700 {
    width: 700px;
    margin: 0 auto;
  }
}
</style>
