<template>
    <Card>
        <div class="flex flex-col gap-2.5 w-full">
            <div v-if="mainImage || restOfImages" class="w-full">
                <img
                    v-if="mainImage"
                    class="object-cover w-full max-h-64 h-full rounded-[10px] overflow-hidden"
                    :src="getPreviewFromFile(mainImage)"
                    :alt="`${service.title}-${
                        preview ? mainImage.name : mainImage.id
                    }`"
                />

                <ul class="flex w-full flex-wrap gap-2.5 mt-1.5">
                    <swiper
                        class="w-full"
                        :slides-per-view="3.5"
                        :space-between="10"
                    >
                        <SwiperSlide
                            v-for="image in restOfImages"
                            :alt="`${service.title}-${
                                preview ? image.name : image.id
                            }`"
                            :key="`portfolio_project_image_${
                                preview ? image.name : image.id
                            }`"
                        >
                            <img
                                :src="getPreviewFromFile(image)"
                                class="w-[215px] h-[110px] rounded-[10px] overflow-hidden object-cover"
                            />
                        </SwiperSlide>
                    </swiper>
                </ul>
            </div>
            <div class="flex flex-col flex-1 gap-5 pt-8">
                <div class="text-xs">
                    <p class="text-gray-200 mb-1.5">
                        {{ $t("Register.service_title2") }}:
                    </p>
                    <p class="text-sm font-medium text-gray-300">
                        {{ service.title }}
                    </p>
                </div>
                <div class="text-xs">
                    <p class="text-gray-200 mb-1.5">
                        {{ $t("Register.service_description") }}:
                    </p>
                    <p class="text-sm font-medium text-gray-300 line-clamp-3">
                        {{ service.description }}
                    </p>
                </div>
                <div class="flex items-center justify-start gap-7">
                    <div
                        v-if="service.hierarchicalCategories?.category?.name"
                        class="text-xs"
                    >
                        <p class="text-gray-200 mb-1.5">
                            {{ $t("Register.service_category2") }}
                        </p>
                        <p class="text-sm font-medium text-gray-300">
                            {{ service.hierarchicalCategories?.category?.name }}
                        </p>
                    </div>
                    <div class="text-xs">
                        <p class="text-gray-200 mb-1.5">
                            {{ $t("Register.service_location2") }}
                        </p>
                        <p
                            class="text-sm font-medium text-gray-300 line-clamp-1"
                        >
                            {{ service.location.address }}
                        </p>
                    </div>
                </div>
                <div
                    class="text-xs"
                    v-if="
                        service.hierarchicalCategories.sub_categories.length > 0
                    "
                >
                    <p class="text-gray-200 mb-1.5">
                        {{ $t("Register.service_specialties") }}
                    </p>
                    <div
                        class="flex items-start justify-start gap-2.5 flex-wrap"
                    >
                        <Badge
                            v-for="sub_category in service
                                .hierarchicalCategories.sub_categories"
                            :key="sub_category.id"
                            class="text-xs"
                        >
                            <span class="text-xs leading-6">
                                {{ sub_category.name }}
                            </span>
                        </Badge>
                    </div>
                </div>
                <div class="text-xs" v-if="service.skills.length > 0">
                    <p class="text-gray-200 mb-1.5">
                        {{ $t("Register.service_tools") }}
                    </p>
                    <div
                        class="flex items-start justify-start gap-2.5 flex-wrap"
                    >
                        <Badge
                            v-for="skill in service.skills"
                            :key="skill.id"
                            class="text-xs"
                        >
                            <span class="text-xs leading-6">
                                {{ skill[`name_${$i18n.locale}`] }}
                            </span>
                        </Badge>
                    </div>
                </div>
            </div>
        </div>
    </Card>
</template>

<script setup>
import Badge from "@/components/General/Badge.vue";
import Card from "@/components/Containers/ContentCard";
import Button from "@/Jetstream/Button.vue";
import { computed, onMounted } from "@vue/runtime-core";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";

const props = defineProps({
    service: Object,
    preview: {
        type: Boolean,
        default: false,
    },
});

const statusColor = computed(() => {
    switch (props.service.status) {
        case "Published":
            return "green";
        case "Paused":
            return "red";
        case "Drafted":
            return "orange";
        default:
            return "blue";
    }
});

const restOfImages = computed(() => {
    return props.service.images.slice(1);
});

const mainImage = computed(() => {
    return props.service.images ? props.service.images[0] : null;
});

//Get blob or url to preview
const getPreviewFromFile = (file) => {
    return file.url ? file.url : URL.createObjectURL(file);
};
</script>
