<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { StoreData } from '@/models/storeData'
import logoVNC from '@images/misc/remote_128.png'

const props = defineProps<Props>()
const drive = ['M:', 'N:', 'O:', 'P:', 'Q:', 'R:', 'S:', 'T:']

const selectedProtocol = ref('hdpos')

interface Props {
  storeData: StoreData
}

const localStoreData = ref()

onMounted(() => {
  // use copy a store data to prevent changes of ip field
  localStoreData.value = JSON.parse(JSON.stringify(props.storeData))
  localStoreData.value.store.caisses = localStoreData.value.store.caisses.map((caisse: any) => ({
    ...caisse,
    drive: null, // replace null with the initial value you want to use
  }))
})

const openVnc = (ip: string) => {
  let url = ''

  if (selectedProtocol.value === 'hdpos')
    url = `hdpos://tightvnc?ip=${ip}`
  else
    url = `${selectedProtocol.value}://${ip}`

  window.open(url, '_blank')
}

// eslint-disable-next-line @typescript-eslint/no-shadow
const mountDrive = (ip: string, drive: string) => {
  const url = `hdpos://monter?lettre=${drive}&ip=${ip}`

  window.open(url, '_blank')
}
</script>

<template>
  <VRow>
    <VCol
      cols="12"
      md="6"
    >
      <VCard
        flat
        border
      >
        <VCardText>
          <VCardText class="text-center d-flex align-center justify-left">
            <img
              :src="logoVNC"
              size="128"
            >
            <AppSelect
              v-model="selectedProtocol"
              :items="['hdpos', 'vnc']"
              class="me-3"
              style="max-inline-size: 130px"
            />
          </VCardText>
          <div v-if="localStoreData && localStoreData.store.caisses">
            <div
              v-for="(caisse, index) in localStoreData.store.caisses"
              :key="index"
              class="d-flex align-items-center mb-5"
            >
              <VRow>
                <VCol
                  cols="6"
                  md="6"
                  class="d-flex align-items-center"
                >
                  <VTextField
                    v-model.lazy="caisse.ip"
                    label="IP"
                    class="me-3"
                  />
                  <VBtn
                    v-if="caisse.ip"
                    color="primary"
                    @click="openVnc(caisse.ip)"
                  >
                    Pos {{ caisse.id_caisse }}
                  </VBtn>
                  <VBtn
                    v-else
                    disabled
                    color="primary"
                  >
                    Pos {{ caisse.id_caisse }}
                  </VBtn>
                </VCol>

                <VCol
                  cols="12"
                  md="6"
                  class="d-flex align-items-center"
                >
                  <AppSelect
                    v-model="caisse.drive"
                    :items="drive"
                    label=""
                    density="compact"
                    placeholder="Select"
                    class="me-3"
                  />
                  <VBtn
                    v-if="caisse.drive"
                    color="primary"
                    @click="mountDrive(caisse.ip, caisse.drive)"
                  >
                    Mount drive {{ caisse.drive }}
                  </VBtn>
                  <VBtn
                    v-else
                    disabled
                    color="primary"
                  >
                    Mount drive
                  </VBtn>
                </VCol>
              </VRow>
            </div>
          </div>
        </VCardText>
      </VCard>
    </VCol>
  </VRow>
</template>
