<template>
  <div class="station">
    <button class="station__save" @click="saveStation">
      <saveIcon />
    </button>
    <dl class="station__info">
      <dt class="station__uuid" @click="copy(uuidCopy)">{{ station.uuid }}</dt>
      <div class="station__train train">
        <div class="train__name">
          <trainIcon v-if="station.info?.train_present" />
          <div class="train__info">
            <p v-if="station.info?.train_present">
              {{ station.info?.train_name }}
            </p>
            <p v-if="!station.info?.train_present && station.info?.train_enroute">Enroute</p>
            <p v-if="!station.info?.train_present && !station.info?.train_enroute">Not present</p>
          </div>
        </div>
        <div class="station__controls">
          <dd class="station__change">
            <input type="text" class="" v-model="stationName" />

            <changeIcon />
          </dd>
          <arrowIcon v-if="station.info?.train_present" />
          <select class="station__select" v-model="selectedStation" v-if="station.info?.train_present">
            <option disabled value="">Выбрать станцию</option>
            <option :value="station_.uuid" v-for="station_ in routeStations" :key="station_.uuid">
              {{ station_.name }}
            </option>
          </select>
        </div>
        <div class="train__checkbox" v-if="station.info?.train_present">
          <label :for="`twoWay-${station.uuid}`">В две стороны?</label>
          <input type="checkbox" class="train__way" :id="`twoWay-${station.uuid}`" v-bind="twoWay" />
        </div>
      </div>
      <Button @click="goToStation" v-if="station.info?.train_present">Go</Button>
    </dl>
  </div>
</template>

<script setup>
import saveIcon from '@/shared/icon/saveIcon.vue'
import changeIcon from '@/shared/icon/changeIcon.vue'
import trainIcon from '@/shared/icon/trainIcon.vue'
import arrowIcon from '@/shared/icon/arrowIcon.vue'
import Button from '@/shared/button/Button.vue'
import { api } from '@/app/api'
import { computed, defineProps, ref, watch } from 'vue'
import { useClipboard } from '@vueuse/core'
import { useStationStore } from '@/app/store/stationStore'

const stationProps = defineProps({
  station: {
    type: Object,
    default: () => ({})
  }
})
const stationStore = useStationStore()
const uuidCopy = ref(stationProps.station.uuid)
const { copy } = useClipboard({ uuidCopy })

// Название станции
const stationName = ref(stationProps.station.info?.station_name)
watch(
  () => stationProps.station.info?.station_name,
  (newName) => {
    stationName.value = newName
  }
)

//Выбранная станция
const selectedStation = ref('')
//Выбор туда-сюда
const twoWay = ref(false)

const routeStations = computed(() => {
  return stationStore.stations.filter(({ uuid, info }) => {
    return (
      info && uuid !== stationProps.currentStationUUID && !info.train_present && !info.train_enroute
    )
  })
})

const saveStation = async () => {
  try {
    console.log(stationProps.station.uuid, stationName.value)
    await api.setStationName(
      stationProps.station.uuid, //uuid спропса
      stationName.value //Выбранная станция
    )
    console.log(`Имя станции сохранено`)
  } catch (error) {
    console.log(
      `Ошибка сохранения имени станции на имя ${stationName.value}. uuid:${stationProps.station.uuid}`,
      error
    )
  }
}

const goToStation = async () => {
  if (selectedStation.value == '') return
  try {
    console.log(`Пришло: uuid:${stationProps.station.uuid}, select:${selectedStation.value}`)
    await api.setStationSchedule(
      stationProps.station.uuid, //uuid пропса
      selectedStation.value, //Выбранная станция
      twoWay.value
    )
    selectedStation.value = ''
    console.log(
      `Станция ${stationProps.station.name} uuid:${stationProps.station.uuid}. Отправлена на ${selectedStation.value}. В две стороны? ${twoWay.value ? 'Да' : 'Нет'}`
    )
  } catch (error) {
    console.log(`Ошибка отправки на станцию`, error)
  }
}
</script>

refactor this code , made it better