<template>
    <section class="flex flex-col w-full gap-6">
        <Card>
            <div class="flex flex-col gap-2.5 w-full">
                <div class="flex flex-col flex-1 gap-5 pt-8">
                    <div class="grid grid-cols-2 gap-5">
                        <div class="text-xs">
                            <p class="text-gray-200 mb-1.5">
                                {{ $t("Register.project_titles") }}:
                            </p>
                            <p class="text-sm font-medium text-gray-300">
                                {{ project.title }}
                            </p>
                        </div>
                        <div class="text-xs">
                            <p class="text-gray-200 mb-1.5">
                                {{ $t("Register.project_type") }}:
                            </p>
                            <p class="text-sm font-medium text-gray-300">
                                {{ project.is_public ? "Public" : "Private" }}
                            </p>
                        </div>
                    </div>
                    <div class="text-xs">
                        <p class="text-gray-200 mb-1.5">
                            {{ $t("Register.project_description") }}:
                        </p>
                        <p
                            class="text-sm font-medium text-gray-300 line-clamp-3"
                        >
                            {{ project.description }}
                        </p>
                    </div>
                    <div class="grid grid-cols-2 gap-5">
                        <div class="text-xs">
                            <p class="text-gray-200 mb-1.5">
                                {{ $t("Register.project_ccategory") }}:
                            </p>
                            <p class="text-sm font-medium text-gray-300">
                                {{
                                    project.hierarchicalCategories?.category
                                        ?.name
                                }}
                            </p>
                        </div>
                        <div class="text-xs">
                            <p class="text-gray-200 mb-1.5">
                                {{ $t("Register.prefered_location") }}:
                            </p>
                            <p
                                class="text-sm font-medium text-gray-300 line-clamp-1"
                            >
                                {{ project.location?.address }}
                            </p>
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-5">
                        <div v-if="language" class="text-xs">
                            <p class="text-gray-200 mb-1.5">
                                {{ $t("Register.prefered_languages") }}:
                            </p>
                            <p class="text-sm font-medium text-gray-300">
                                {{ language?.name }}
                            </p>
                        </div>
                        <div class="text-xs">
                            <p class="text-gray-200 mb-1.5">
                                {{ $t("Register.level_experienc") }}:
                            </p>
                            <p
                                class="text-sm font-medium text-gray-300 line-clamp-1"
                            >
                                {{ levelOfExperience[`name_${$i18n.locale}`] }}
                                ({{ levelOfExperience[`sub_${$i18n.locale}`] }})
                            </p>
                        </div>
                    </div>
                    <div v-if="sub_categories.length > 0" class="text-xs">
                        <p class="text-gray-200 mb-1.5">
                            {{ $t("Register.project_specialties") }}:
                        </p>
                        <div
                            class="flex items-start justify-start gap-2.5 flex-wrap"
                        >
                            <Badge
                                v-for="sub_category in 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="project.skills.length > 0">
                        <p class="text-gray-200 mb-1.5">
                            {{ $t("Register.service_skill") }}:
                        </p>
                        <div
                            class="flex items-start justify-start gap-2.5 flex-wrap"
                        >
                            <Badge
                                v-for="skill in project.skills"
                                :key="skill.id"
                                class="text-xs"
                            >
                                <span class="text-xs leading-6">
                                    {{ skill[`name_${$i18n.locale}`] }}
                                </span>
                            </Badge>
                        </div>
                    </div>
                    <div class="text-xs" v-if="project.files.length > 0">
                        <p class="text-gray-200 mb-1.5">
                            {{ $t("Register.project_attachements") }}:
                        </p>
                        <div
                            class="flex flex-col items-start justify-start gap-2.5 flex-wrap"
                        >
                            <template v-for="(file, i) in project.files">
                                <a
                                    :key="file.name"
                                    v-if="file"
                                    :href="getPreviewFromFile(file)"
                                    :title="file.name"
                                    class="rounded-lg gap-1 min-h-[30px] bg-blue-200 px-[12px] py-1 max-w-[200px] text-xs overflow-hidden flex items-center justify-center text-gray-300"
                                    rel="noopener noreferrer"
                                    target="_blank"
                                >
                                    <span class="flex-1 line-clamp-1">
                                        {{ getFileName(file, i + 1) }}
                                    </span>
                                </a>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </Card>
        <Card>
            <div class="flex flex-col gap-2.5 w-full">
                <div class="grid grid-cols-2 gap-5">
                    <div class="text-xs">
                        <p class="text-gray-200 mb-1.5">
                            {{ $t("Register.project_starting") }}:
                        </p>
                        <p class="text-sm font-medium text-gray-300">
                            {{ moment(project.start_date).fromNow() }}
                        </p>
                    </div>
                    <div class="text-xs">
                        <p class="text-gray-200 mb-1.5">
                            {{ $t("Register.psroject_duration") }}:
                        </p>
                        <p class="text-sm font-medium text-gray-300">
                            {{ daysToReadable(project.duration) }}
                        </p>
                    </div>
                </div>
                <div class="text-xs">
                    <p class="text-gray-200 mb-1.5">
                        {{ $t("Register.psroject_budget") }}:
                    </p>
                    <p class="text-sm font-medium text-gray-300 line-clamp-3">
                        {{ project.budget_type }}
                    </p>
                </div>
                <template v-if="project.budget_type == 'Bidding'">
                    <div class="text-xs">
                        <p class="text-gray-200 mb-1.5">
                            {{ $t("Register.bivdding_price") }}:
                        </p>
                        <p
                            class="text-sm font-medium text-gray-300 line-clamp-3"
                        >
                            {{ currency(project.bidding_start) }}
                        </p>
                    </div>

                    <div class="text-xs">
                        <p class="text-gray-200 mb-1.5">
                            {{ $t("Register.bbidding_price") }}:
                        </p>
                        <p
                            class="text-sm font-medium text-gray-300 line-clamp-3"
                        >
                            {{ currency(project.bidding_end) }}
                        </p>
                    </div>
                </template>
                <template v-else>
                    <div class="text-xs">
                        <p class="text-gray-200 mb-1.5 capitalize">
                            {{
                                project.budget_type == "Rate"
                                    ? `${project.rate_type} price:`
                                    : $t("Register.pproject_price")
                            }}
                        </p>
                        <p
                            class="text-sm font-medium text-gray-300 line-clamp-3"
                        >
                            {{ currency(project.amount) }}

                            {{
                                project.rate_type
                                    ? " / " + project.rate_type
                                    : ""
                            }}
                        </p>
                    </div>
                </template>
            </div>
        </Card>
    </section>
</template>

<script setup>
import Badge from "@/components/General/Badge.vue";
import Card from "@/components/Containers/ContentCard";
import Button from "@/Jetstream/Button.vue";
import { computed, nextTick, onMounted } from "@vue/runtime-core";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import moment from "moment";
import { daysToReadable } from "@/helpers/date";
import { currency } from "@/helpers/money";
const props = defineProps({
    project: Object,
    preview: {
        type: Boolean,
        default: false,
    },
    languages: {
        type: Array,
        default: () => [],
    },
    levelsOfExperience: {
        type: Array,
        default: () => [],
    },
});

const biddingStart = computed(() => {
    return currency(props.project.bidding_start);
});

const biddingMax = computed(() => {
    return currency(props.project.bidding_end);
});

const levelOfExperience = computed(() => {
    return props.levelsOfExperience.find(
        (level) => level.id === props.project.level_of_experience_id
    );
});

const language = computed(() => {
    return props.preview
        ? props.languages.find(
              (language) => language.id === props.project.language_id
          )
        : props.project.language;
});

const sub_categories = computed(() => {
    return props.project.hierarchicalCategories.sub_categories;
});

const getPreviewFromFile = (file) => {
    return file.url ? file.url : URL.createObjectURL(file);
};

const getFileName = (file, index) => {
    return file.name ? file.name : "Attachment " + index;
};
</script>
