<template>
	<div class="shape-wrapper flex flex-wrap xyz-in" xyz="fade flip-up flip-left" v-if="props.source && props.source.length > 0">
		<div
			v-for="(item ,srvcindex) in props.source"
			:key="`grp_${srvcindex}`"
			class="shape w-1/2 md:w-1/4 lg:w-1/6 xl:w-1/7 font-light dark:bg-gray-200 bg-gray-300"
			:class="{hidden: !filter_item(item)}"
			@click="on_item(item,$event)"
		>
			<div
				class="flex bg-white dark:bg-gray-300 rounded-lg shadow-md m-2 border-l-4 border-gray-500 dark:border-gray-500 hover:shadow-2xl hover:border-pink-500 cursor-pointer relative"
			>
				<div class=" p-4 pr-6 leading-normal">
					<div class="font-medium text-xl truncate">
						{{ item.name }}
					</div>
					<div
						class="truncate text-xs text-gray-500 font-semibold pt-1 pb-2 tracking-widest"
						v-html="map_srvc_target(item.srvc.target)"
					>
					</div>
					<div class="flex font-medium">
						<div v-if="authData.auth !== ''" class="flex-grow text-gray-400">
							{{ item.srvc.req || 'tcp' }}
						</div>
						<div
							class="flex-grow-0"
							:class="{ 'text-indigo-500' : item.info === 'ok' , 'text-red-600' : item.info !== 'ok' && item.srvc.critical === CriticalType.yes, 'text-green-500': item.info !== 'ok' && item.srvc.critical !== CriticalType.yes}"
						>
							<span v-if="item.info === 'ok'" class="text-2xl">
								<carbon-checkmark class="align-bottom" />
							</span>
							<span v-else class="ml-3">
								<span v-if="authData.auth === '' && (item.srvc.critical === CriticalType.ifresized || item.srvc.critical === CriticalType.cloud) ">
									{{ item.info }} <span class="ml-3">{{ t('srvc.pending','pending')}}</span>
								</span>
								<span v-else>
									{{ item.info }} <span v-if="item.srvc.critical !== CriticalType.yes" class="ml-3">{{ item.srvc.critical }}</span>
								</span>
							</span>
						</div>
					</div>
					<div v-if="authData.auth !== ''" class="flex mt-2 font-medium">
						<div v-if="item.srvc.path" class="flex-grow-0 text-1xl text-blue-600 hover:text-blue-700 mr-2 block" :data="item.srvc.path">
							<carbon-script class="inline-block" />
						</div>
						<div v-if="item.srvc.liveness" class="flex-grow text-xs text-blue-600 hover:text-blue-700 block" :data="item.srvc.liveness">
							{{ item.srvc.liveness }}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import {
  SrvcInfoType,
  CriticalType,
} from '~/typs/clouds'

import { auth_data } from '~/hooks/utils'
const { t } = useI18n()

let shapWrapper = document.querySelector(".shape-wrapper");
const props = defineProps<{
  source: SrvcInfoType[]
  hostname: string
  target: string
  filter: string
}>()
const emit = defineEmits(['onCloudServiceItem'])
const on_item = (item: SrvcInfoType, event: Event) => {
  event.preventDefault()
  event.stopImmediatePropagation()
  event.stopPropagation()
  emit('onCloudServiceItem', item)
}
const authData = auth_data()
// TODO review https://medium.com/@KevinBGreene/typescript-enums-and-polymorphism-with-type-matching-fc3dc74b031c
const critical_matches = (val: CriticalType, match: string): boolean => {
  switch (match) {
    case 'yes':
			return val === CriticalType.yes
    case 'no':
			return val === CriticalType.no
    case 'cloud':
			return val === CriticalType.cloud
    case 'group':
			return val === CriticalType.group
    case 'ifresized':
			return val === CriticalType.ifresized
    default:
      return false
  }
}
const map_srvc_target = (srvc_target: string): string => {
	return srvc_target ? srvc_target.replace('::','<br>') : (authData.auth !== '' && props.hostname || '')
}
const filter_item = (item: SrvcInfoType): boolean => {
  if (authData.auth !== '') 
	  return  props.filter === '' || item.name.includes(props.filter) || item.srvc.target.includes(props.filter)
      || item.srvc.liveness.includes(props.filter) || item.info.includes(props.filter)
      || props.hostname.includes(props.filter) || critical_matches(item.srvc.critical,props.filter)
	else
	  return  props.filter === '' || item.name.includes(props.filter) || item.srvc.target.includes(props.filter)
      || item.info.includes(props.filter)
}
onMounted(() => {
	shapWrapper = document.querySelector(".shape-wrapper");
	function animate(selector: Element|null) {
		if (selector && selector.classList.contains("xyz-in")) {
			selector.classList.remove("xyz-in");
			selector.classList.add("xyz-out");
		} else if (selector) {
			selector.classList.remove("xyz-out");
			selector.classList.add("xyz-in");
		}
	}

	animate(shapWrapper);
})
</script>
<style>
.shape-wrapper {
  justify-content: center;
}
.shape {
  width: auto;
  height: auto;
  margin: 1rem;
  border-radius: 20px;
}
</style>