<script setup lang="ts">
import { format } from 'date-fns'
import VueJsonPretty from 'vue-json-pretty'
import type { Order, OrderOms } from '@/models/Order'
import logoProximis from '@images/misc/logo-proximis.png'
import 'vue-json-pretty/lib/styles.css'

const props = defineProps<Props>()

const { t } = useI18n()

interface Props {
  orderData: Order
}

const omsData = ref<OrderOms>()
const omsError = ref()

const OrderMessageDialogVisible = ref(false)
const OrderMessageData = ref()

const { data: apiDataOms, error: apiErrorOms } = await useApi<any>(`/proximis/project/fulfillment/${props.orderData.common.orderId}`)
if (apiErrorOms.value)
  omsError.value = `${apiErrorOms.value.status} - ${apiErrorOms.value.error}`
else
  omsData.value = apiDataOms.value

const openOrderMessageDialog = async (): Promise<void> => {
  const { data: apiDataMessage, error: apiErrorMessage } = await useApi<any>(`/obi/order/${props.orderData.meta.id}/orderMessage`)
  if (apiErrorMessage.value) {
    OrderMessageData.value = `${apiErrorMessage.value.status} - ${apiErrorMessage.value.error}`
    OrderMessageDialogVisible.value = true
  }
  else {
    OrderMessageData.value = apiDataMessage.value
    OrderMessageDialogVisible.value = true
  }
}

const openOmsOrderPage = (): void => {
  // Check if omsData is defined before accessing its value property
  if (omsData.value) {
    const url = `${omsData.value.common.urlApp}/ua.php/orderManager/Order/${omsData.value.oms.item.id}`

    window.open(url, '_blank')
  }
  else {
    // Handle the case when omsData is not defined
    console.error('omsData is not defined')
  }
}
</script>

<template>
  <!-- 👉 Proximis -->
  <VCard>
    <VRow no-gutters>
      <VCol cols="6">
        <VCardText class="pa-4">
          <h6 class="text-lg text-no-wrap font-weight-medium">
            {{ $t('OMS') }}
          </h6>
          <p class="mb-2">
            {{ $t('OMS Partner') }}
          </p>
        </VCardText>
      </VCol>

      <VCol
        cols="6"
        class="text-right"
      >
        <VCardText class="pa-3">
          <VImg
            :src="logoProximis"
            height="50"
          />
        </VCardText>
      </VCol>

      <VCol cols="12">
        <VCardText>
          <div v-if="omsData">
            <VList class="card-list mt-0">
              <div class="text-disabled text-uppercase text-sm">
                {{ $t('Transaction details') }}
              </div>
              <VListItem>
                <div class="text-body-1 mt-2">
                  <span class="font-weight-bold me-2">Id:</span>
                  <span>
                    {{ omsData.oms.item.id }} / {{ omsData.oms.item.code }}
                  </span>
                </div>
              </VListItem>
            </VList>
            <VList class="card-list mt-2">
              <VListItem>
                <div class="text-body-1">
                  <span class="font-weight-bold me-2">{{ $t('Last status') }}:</span>
                  <span>
                    {{ omsData.oms.item.status }}
                  </span>
                </div>
              </VListItem>
            </VList>
            <VList class="card-list mt-2">
              <VListItem>
                <div class="text-body-1">
                  <span class="font-weight-bold me-2">{{ $t('Added') }}:</span>
                  <span>
                    {{ format(omsData.oms.item.modificationDate, "EEEE d MMMM yyyy HH:mm:ss") }}
                  </span>
                </div>
              </VListItem>
            </VList>
            <VList class="card-list mt-2">
              <VListItem>
                <div class="text-body-1">
                  <span class="font-weight-bold me-2">fulfillSystem:</span>
                  <span>
                    {{ omsData.oms.item.fulfillSystem }} / {{ omsData.oms.item.fulfillStoreCode }}
                  </span>
                </div>
              </VListItem>
            </VList>
            <VList class="card-list mt-2">
              <VListItem>
                <div class="text-body-1">
                  <span class="font-weight-bold me-2">{{ $t('Modified') }}:</span>
                  <span>
                    {{ format(omsData.oms.item.creationDate, "EEEE d MMMM yyyy HH:mm:ss") }}
                  </span>
                </div>
              </VListItem>
            </VList>
          </div>
          <div v-else>
            Error: {{ omsError }}
          </div>
        </VCardText>
      </VCol>

      <VDivider />

      <VCol cols="6">
        <VCardText class="pa-4">
          <VBtn
            class="mt-0"
            @click="openOrderMessageDialog"
          >
            {{ $t('Transaction') }}
          </VBtn>
        </VCardText>
      </VCol>

      <VCol
        v-if="omsData"
        cols="6"
        class="text-right"
      >
        <VCardText class="pa-4">
          <VBtn
            class="mt-0"
            @click="openOmsOrderPage"
          >
            {{ $t('Open order') }}
          </VBtn>
        </VCardText>
      </VCol>
    </VRow>
  </VCard>

  <VDialog
    v-model="OrderMessageDialogVisible"
    fullscreen
    :scrim="false"
    transition="dialog-bottom-transition"
  >
    <!-- Dialog Content -->
    <VCard>
      <!-- Toolbar -->
      <div>
        <VToolbar color="primary">
          <VBtn
            icon
            variant="plain"
            @click="OrderMessageDialogVisible = false"
          >
            <VIcon
              color="white"
              icon="tabler-x"
            />
          </VBtn>

          <VToolbarTitle>{{ t("Order transaction") }}</VToolbarTitle>

          <VSpacer />

          <VToolbarItems>
            <VBtn
              variant="text"
              @click="OrderMessageDialogVisible = false"
            >
              {{ t("Close") }}
            </VBtn>
          </VToolbarItems>
        </VToolbar>
      </div>

      <!-- pretty json viewer -->
      <VCardText>
        <VueJsonPretty
          :show-length="false"
          show-line-number
          show-icon
          :show-line="false"
          :data="OrderMessageData"
        />
      </VCardText>
    </VCard>
  </VDialog>
</template>

<style lang="scss">
.dialog-bottom-transition-enter-active,
.dialog-bottom-transition-leave-active {
  transition: transform 0.2s ease-in-out;
}

.full-screen-dialog-list{
  .v-list-item[tabindex="-2"].v-list-item--active{
    .v-list-item-action{
      .v-icon{
        color: #fff;
      }
    }
  }

}
</style>
