<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>()

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { t } = useI18n()

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')
}

const openBO = () => {
  const url = `http://aspf.adic.lan/site/login/login.asp?dataid=1&validated=1&input_login=caisse${localStoreData.value.store.id_structure}-20&input_password=caisse&id_caisse=20`

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

<template>
  <VRow>
    <VCol
      cols="12"
      md="6"
    >
      <VCard>
        <VCardText>
          <p>
            {{ $t('REMOTE CONTROL') }}
          </p>
          <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)"
                  >
                    {{ $t('Mount drive') }} {{ caisse.drive }}
                  </VBtn>
                  <VBtn
                    v-else
                    disabled
                    color="primary"
                  >
                    {{ $t('Mount drive') }}
                  </VBtn>
                </VCol>
              </VRow>
            </div>
          </div>
        </VCardText>
      </VCard>
    </VCol>
    <VCol
      cols="12"
      md="6"
    >
      <VCard>
        <!-- 👉 BO access Link -->
        <VCardText>
          <p>
            {{ $t('EXTERNAL LINK') }}
            <VAlert
              color="warning"
              variant="tonal"
              class="mb-5 mt-4"
            >
              {{ $t('Note: Click on the button below to access DOTSOFT Back-office') }}
            </VAlert>
          </p>
          <div>
            <VBtn @click="openBO">
              {{ $t('Open Back-office') }}
            </VBtn>
          </div>
        </VCardText>
      </VCard>
    </VCol>
  </VRow>
</template>
