<template>
  <div class="flex items-stretch group">
    <span
      v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
      class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
      :class="entryStatus.className"
      data-testid="restore_history_entry"
      :title="`${duration}`"
      @click="emit('use-entry')"
    >
      <span class="font-semibold truncate text-tiny">
        {{ entry.request.method }}
      </span>
    </span>
    <span
      v-tippy="{
        theme: 'tooltip',
        delay: [500, 20],
        content: entry.updatedOn ? shortDateTime(entry.updatedOn) : null,
      }"
      class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
      data-testid="restore_history_entry"
      @click="emit('use-entry')"
    >
      <span class="truncate">
        {{ entry.request.endpoint }}
      </span>
    </span>
    <HoppButtonSecondary
      v-tippy="{ theme: 'tooltip' }"
      :icon="IconTrash"
      color="red"
      :title="t('action.remove')"
      class="hidden group-hover:inline-flex"
      data-testid="delete_history_entry"
      @click="emit('delete-entry')"
    />
    <HoppButtonSecondary
      v-tippy="{ theme: 'tooltip' }"
      :title="!entry.star ? t('add.star') : t('remove.star')"
      :class="{ 'group-hover:inline-flex hidden': !entry.star }"
      :icon="entry.star ? IconStarOff : IconStar"
      color="yellow"
      data-testid="star_button"
      @click="emit('toggle-star')"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue"
import findStatusGroup from "~/helpers/findStatusGroup"
import { useI18n } from "@composables/i18n"
import { RESTHistoryEntry } from "~/newstore/history"
import { shortDateTime } from "~/helpers/utils/date"

import IconStar from "~icons/lucide/star"
import IconStarOff from "~icons/lucide/star-off"
import IconTrash from "~icons/lucide/trash"

const props = defineProps<{
  entry: RESTHistoryEntry
  showMore: boolean
}>()

const emit = defineEmits<{
  (e: "use-entry"): void
  (e: "delete-entry"): void
  (e: "toggle-star"): void
}>()

const t = useI18n()

const duration = computed(() => {
  if (props.entry.responseMeta.duration) {
    const responseDuration = props.entry.responseMeta.duration
    if (!responseDuration) return ""

    return responseDuration > 0
      ? `${t("request.duration")}: ${responseDuration}ms`
      : t("error.no_duration")
  } else return t("error.no_duration")
})

const entryStatus = computed(() => {
  const foundStatusGroup = findStatusGroup(props.entry.responseMeta.statusCode)
  return (
    foundStatusGroup || {
      className: "",
    }
  )
})
</script>
