<script setup>
import { date } from 'alga-js'

// Use the centralized role menu composable
const { getMenuType } = useRoleMenu()

// This will be set using the composable method
const defaultSideBarMenu = ref('c') // Changed from 'Menu' to 'c'

const props = defineProps({
  params: Object
})

// props.params.data.created.setHours(props.params.data.created.getHours() -2)

const newdate = computed(() => {
  // Verify and format the created date
  const createdValue = new Date(props.params.data.created)
  createdValue.setHours(createdValue.getHours() - 2)


  let createdDate

  if (!createdValue) {
    return 'No date'
  }

  // Format as dd.mm
  const formatted =
      String(createdValue.getDate()).padStart(2, "0") + "." +
      String(createdValue.getMonth() + 1).padStart(2, "0")


  // Try to parse the date - handle different formats
  if (typeof createdValue === 'string') {
    createdDate = new Date(createdValue)
    createdValue.setHours(createdValue.getHours() + 2)
  } else if (createdValue instanceof Date) {
    createdDate = createdValue
  } else if (typeof createdValue === 'number') {
    // Handle timestamp
    createdDate = new Date(createdValue)
    createdValue.setHours(createdValue.getHours() + 2)

  } else {
    return 'Invalid date'
  }
  
  // Validate the date
  if (isNaN(createdDate.getTime())) {
    return 'Invalid date'
  }

  // Create 'now' with Berlin timezone
  const now = new Date()

  // Calculate time differences
  const timeDiffMs = now.getTime() - createdDate.getTime()
  const totalMinutes = Math.floor(timeDiffMs / (1000 * 60))
  const totalHours = Math.floor(timeDiffMs / (1000 * 60 * 60))

  // Show minutes if less than 60 minutes (1 hour)
  if (totalMinutes < 60) {
    if (totalMinutes <= 0) {
      return `gerade eben`
    } else if (totalMinutes === 1) {
      return `vor 1 Min.`
    } else {
      return `vor ${totalMinutes} Min.`
    }
  }
  // Show hours if 1-23 hours
  else if (totalHours < 24) {
    if (totalHours === 1) {
      return `vor 1 Std.`
    } else {
      return `vor ${totalHours} Std.`
    }
  } else {
    // Display normal date format for older dates (24+ hours) - dd.MM format
    return formatted
  }
})

const newdatetitle = computed(() => {
  let newdateformat = new Date(props.params.data.created)
  // Subtract 2 hours
  newdateformat.setHours(newdateformat.getHours() - 2)

  // Format as "dd.MM.YYYY - HH.MM"
  const formatted =
      String(newdateformat.getDate()).padStart(2, "0") + "." +
      String(newdateformat.getMonth() + 1).padStart(2, "0") + "." +
      newdateformat.getFullYear() + " - " +
      String(newdateformat.getHours()).padStart(2, "0") + ":" +
      String(newdateformat.getMinutes()).padStart(2, "0")

  return formatted
})

const dateordered = computed(() => {
  let newdateformat = new Date(props.params.data.dateOrdered)
  // Subtract 2 hours
  newdateformat.setHours(newdateformat.getHours() - 2)

  // Format as "dd.MM.YYYY - HH.MM"
  const formatted =
      String(newdateformat.getDate()).padStart(2, "0") + "." +
      String(newdateformat.getMonth() + 1).padStart(2, "0") + "." +
      newdateformat.getFullYear() + " - " +
      String(newdateformat.getHours()).padStart(2, "0") + ":" +
      String(newdateformat.getMinutes()).padStart(2, "0")

  return formatted
})


onMounted(() => {
  defaultSideBarMenu.value = getMenuType()
})

</script>


<template>
  <div class="d-inlineFlex items-center gap-5px">
    <div class="tags" :title="'Bestellt: '+dateordered+ ' / Importiert: '+newdatetitle">
      {{ newdate }}
    </div>
  </div>
</template>

<style scoped>
.tag {
  width: 40px;
  height: 20px;
}
.greenbt {
  color: white;
  background-color: #00a500;
  border: 1px solid #00a500;
}

.greybt {
  color: grey;
  border: 1px solid grey;
}

.icons {
  color: white;
}

span[class^='i-mdi'] {
  font-size: 19px;
  margin-top: 4px;
}
</style>