<script setup lang="ts">
import { ref, onMounted, onBeforeMount, watch, computed } from 'vue'
import emitter from '@/utils/bus'
interface ListItem {
  name: string
  number: number
  type: string
  checked: boolean
}
interface Props {
  TagsListItem: ListItem[]
}
const props = withDefaults(defineProps<Props>(), {})

const TagsList = ref(props.TagsListItem)
const NewTagsList = ref()

watch(
  () => props.TagsListItem,
  (current) => {
    TagsList.value = current
  }
)
onMounted(() => {
  emitter.on('clearTag', (tag: any) => {
    if (tag.includes('Shipment status')) {
      checkedCount = []
      // TagsList.value.forEach((item: any) => {
      //   item.checked = false
      // })
      // TagsList.value[0].checked = true
      NewTagsList.value = ['All']
      emits('changeTag', NewTagsList.value, false)
    }
  })
})

onBeforeMount(() => {
  emitter.off('clearTag')
})

NewTagsList.value = []

let checkedCount: any[] = []
const emits = defineEmits(['changeTag'])
const checkedBox = (i: any, name: any, checked: any) => {
  if (name == 'All') {
    checkedCount = []
    TagsList.value.forEach((item: any) => {
      item.checked = false
    })
    TagsList.value[0].checked = true
  } else if (!checked) {
    TagsList.value[0].checked = false
    TagsList.value[i].checked = !TagsList.value[i].checked
    checkedCount.push(name)
    const map = new Map()
    checkedCount.forEach((item) => map.set(item, true))
    checkedCount = [...map.keys()]
  } else {
    checkedCount.splice(checkedCount.indexOf(name), 1)
    TagsList.value[0].checked = false
    TagsList.value[i].checked = !TagsList.value[i].checked
  }
  if (checkedCount.length === TagsList.value.length - 1 || checkedCount.length == 0) {
    checkedCount = []
    TagsList.value.forEach((item: any) => {
      item.checked = false
    })
    TagsList.value[0].checked = true
  }
  if (checkedCount.length == 0) {
    NewTagsList.value = ['All']
  } else {
    NewTagsList.value = checkedCount
  }
  emits('changeTag', NewTagsList.value, true)
}
</script>

<template>
  <div class="body">
    <div class="TagsBox">
      <div
        class="list"
        v-for="(item, index) of TagsList"
        :key="index"
        :class="[item.checked ? 'checked' : '']"
        @click="checkedBox(index, item.name, item.checked)"
      >
        {{ item.name }}
        <div
          :class="[
            'v-tag',
            item.type && 'v-tag__' + item.type,
            item.checked ? 'checked_color' : ''
          ]"
        >
          {{ item.number }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.body {
  margin-top: 8.73px;
}
.TagsBox {
  display: flex;
  flex-wrap: wrap;
}
.list {
  min-width: 93px;
  padding: 5.42px 16px;
  color: var(--color-neutral-2);
  font-size: var(--font-size-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-12);
}
.v-tag {
  min-width: 18px;
  font-size: var(--font-size-2);
  margin-left: 6px;
  border-radius: 6px;
  padding: 3px 4px;
  text-align: center;
}
.v-tag__all {
  font-weight: 400;
  background-color: #feecf3;
  color: #e26394;
}
.v-tag__created {
  font-weight: 400;
  background-color: var(--color-tag-created-bg);
  color: var(--color-tag-created);
}
.v-tag__confirmed {
  font-weight: 400;
  background-color: var(--color-tag-confirmed-bg);
  color: var(--color-tag-confirmed);
}
.v-tag__cancelled {
  font-weight: 400;
  background-color: var(--color-tag-cancelled-bg);
  color: var(--color-tag-cancelled);
}
.v-tag__departure {
  font-weight: 400;
  background-color: var(--color-tag-departure-bg);
  color: var(--color-tag-departure);
}
.v-tag__cargo_received {
  font-weight: 400;
  background-color: var(--color-tag-cargo-received-bg);
  color: var(--color-tag-cargo-received);
}
.v-tag__arrived {
  font-weight: 400;
  background-color: var(--color-tag-arrived-bg);
  color: var(--color-tag-arrived);
}
.v-tag__completed {
  font-weight: 400;
  background-color: var(--color-tag-completed-bg);
  color: var(--color-tag-completed);
}
.checked {
  color: var(--color-tag-all);
  font-weight: 700;
  background: var(--color-tag-checked-all);
}
.checked_color {
  background-color: var(--color-tag-all-bg);
  color: var(--color-tag-all);
}
</style>