<template>
  <li class="file-item" @mouseenter="onMouseenter" @mouseleave="onMouseleave">
    <el-icon :class="{ 'is-loading': isDownLoading }"><component :is="statusIcon" /></el-icon>
    <span class="file-item-name">
      <el-tooltip effect="dark" placement="top-start" :persistent="false">
        <template #content>
          <div class="uploader-tag-tooltip">
            <span class="tooltip-file-name">{{ accessory.fileName }}</span>
            <el-space class="cacp-ml-m" size="small" v-if="!disabled">
              <el-link :disabled="!canSortLeft" @click.prevent="onSortLeft">
                <el-icon>
                  <Top />
                </el-icon>
              </el-link>
              <el-link :disabled="!canSortRight" @click.prevent="onSortRight">
                <el-icon>
                  <Bottom />
                </el-icon>
              </el-link>
            </el-space>
          </div>
        </template>
        <a @click.prevent="downloadFile" class="upload-tag-inner">
          <span>{{ accessory.fileName }}</span>
        </a>
      </el-tooltip>
    </span>
    <el-icon v-if="!disabled" @click.stop="onDelete" size="16" class="close"><Close /></el-icon>
  </li>
</template>
<script lang="ts" setup>
import { computed, inject, ref } from 'vue'
import { type Accessory } from '@cacp/ui'
import { accessoryInjectionKey, SortOrder } from './constants'
import { min, max } from 'lodash-es'

const props = withDefaults(
  defineProps<{
    accessory: Accessory
    disabled?: boolean
  }>(),
  {
    disabled: true
  }
)

const emits = defineEmits<{
  (e: 'on-delete', value: Accessory, isTemp: boolean): void
  (e: 'on-sort', value: Accessory, sortOrder: SortOrder): void
  (e: 'on-download', value: Accessory): void
}>()
const { downloadingList, accessoryList } = inject(accessoryInjectionKey)!

const mouseenter = ref(false)

const statusIcon = computed(() => {
  if (isDownLoading.value) {
    return 'Loading'
  } else {
    if (mouseenter.value) {
      return 'Download'
    } else {
      return 'Document'
    }
  }
})

const isDownLoading = computed<boolean>(() => {
  return downloadingList.value.includes(props.accessory.accessoryId)
})

const canSortLeft = computed<boolean>(() => {
  const minValue = min(accessoryList.value.map((a) => a.sortOrder)) ?? 0
  return minValue !== props.accessory.sortOrder
})

const canSortRight = computed<boolean>(() => {
  const maxValue = max(accessoryList.value.map((a) => a.sortOrder)) ?? 0
  return maxValue !== props.accessory.sortOrder
})

function onSortLeft() {
  if (canSortLeft.value) {
    emits('on-sort', props.accessory, SortOrder.left)
  }
}

function onSortRight() {
  if (canSortRight.value) {
    emits('on-sort', props.accessory, SortOrder.right)
  }
}

function downloadFile() {
  emits('on-download', props.accessory)
}

function onDelete() {
  emits('on-delete', props.accessory, !props.accessory.persisted)
}

function onMouseenter() {
  mouseenter.value = true
}

function onMouseleave() {
  mouseenter.value = false
}
</script>
<style lang="less" scoped>
.file-item {
  height: 30px;
  line-height: 30px;
  font-size: var(--font-size-s);
  padding: 0 var(--cacp-padding-space-s);
  display: flex;
  align-items: center;
  &:hover {
    background-color: var(--el-fill-color-light);
  }
  &.is-error {
    background-color: var(--el-color-error-light-9);
    .file-item-name {
      color: var(--el-color-error);
    }
  }
}
.file-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 var(--cacp-margin-space-s);
  cursor: pointer;
}
.close {
  cursor: pointer;
  &:hover {
    color: var(--el-color-primary);
  }
}
.uploader-tag-tooltip {
  display: flex;
  align-items: center;
  .el-icon {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    &:not(.is-disabled):hover {
      color: #fff;
    }
  }
}

// .file-item
</style>
