<template>
    <Card :title="$t('Register.provider_info')">
        <div>
            <div class="flex flex-row">
                <img
                    class="rounded-full w-[60px] h-[60px] mr-[13px] no-magnify"
                    :src="user.user.profile_photo_url"
                    alt="avatar"
                />
                <div class="space-y-[5px]">
                    <h4 class="text-sm font-medium grey-200">
                       
                        <a
                            :href="isEngineer ? route('engineer.profile.slugged', user.slug) : route('firm.profile.slugged', user.slug)"
                            class="text-sm font-medium grey-200">{{ user.name }}</a>
                    </h4>
                    <span class="flex gap-1 text-sm leading-4 text-gray-200">
                        <svg
                            width="16"
                            height="16"
                            viewBox="0 0 16 17"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <g clip-path="url(#clip0_922_66839)">
                                <path
                                    d="M8 9.8335C9.10457 9.8335 10 8.93807 10 7.8335C10 6.72893 9.10457 5.8335 8 5.8335C6.89543 5.8335 6 6.72893 6 7.8335C6 8.93807 6.89543 9.8335 8 9.8335Z"
                                    stroke="#AAAAAA"
                                    stroke-width="1.5"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                />
                                <path
                                    d="M11.7713 11.6045L8.94263 14.4331C8.69262 14.6829 8.35368 14.8232 8.0003 14.8232C7.64691 14.8232 7.30797 14.6829 7.05796 14.4331L4.22863 11.6045C3.48278 10.8586 2.97485 9.90827 2.76909 8.87371C2.56332 7.83916 2.66896 6.76681 3.07263 5.79229C3.47631 4.81777 4.15989 3.98483 5.03695 3.39881C5.91401 2.81279 6.94514 2.5 7.99996 2.5C9.05478 2.5 10.0859 2.81279 10.963 3.39881C11.84 3.98483 12.5236 4.81777 12.9273 5.79229C13.331 6.76681 13.4366 7.83916 13.2308 8.87371C13.0251 9.90827 12.5171 10.8586 11.7713 11.6045V11.6045Z"
                                    stroke="#AAAAAA"
                                    stroke-width="1.5"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                />
                            </g>
                            <defs>
                                <clipPath id="clip0_922_66839">
                                    <rect
                                        width="16"
                                        height="16"
                                        fill="white"
                                        transform="translate(0 0.5)"
                                    />
                                </clipPath>
                            </defs>
                        </svg>
                        {{ address }}
                    </span>
                    <span
                        class="flex gap-1 mt-0 text-sm leading-4 text-gray-200"
                        ><svg
                            width="14"
                            height="14"
                            viewBox="0 0 14 14"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                d="M7.00015 10.8543L3.39982 12.7472L4.08757 8.73797L1.1709 5.89889L5.1959 5.31555L6.99606 1.66797L8.79623 5.31555L12.8212 5.89889L9.90456 8.73797L10.5923 12.7472L7.00015 10.8543Z"
                                stroke="#FA8C16"
                                stroke-width="1.5"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            />
                        </svg>
                        {{ user.averageRating }}</span
                    >
                </div>
            </div>
            <div class="w-full mt-5">
                <Button
                    :disabled="form.processing"
                    @click="chat"
                    size="full-sm"
                    buttonStyle="outline-blue"
                >
                    {{ $t('Register.chat_with') }} {{ user.name.split(" ")[0] }}
                </Button>
            </div>
        </div>
    </Card>
</template>

<script>
import Card from "@/components/Containers/ContentCard";
import Button from "@/Jetstream/Button";
import { useForm } from "@inertiajs/inertia-vue3";
export default {
    props: {
        user: Object,
        address: String,
        service: Object,
        isProject: {
            type: Boolean,
            default: false,
        },
        workerId: {

            type: Number,
            default: null,
        },
        workerType: {
            type: String,
            default: null,
        },
    },
    components: {
        Card,
        Button,
    },
    data() {
        return {
            form: useForm({
                message: {
                    text: "Hello 👋",
                    attachement: null,
                },
                chatable_id: this.service.id,
                project: this.isProject,
                worker_id: this.workerId,
                worker_type: this.workerType,
            }),
        };
    },
    methods: {
        chat() {
            this.form.post(route("chat.create"), {
                preserveScroll: true,
                onSuccess: () => {},
                onError: (error) => {
                    console.error(error);
                },
            });
        },
    },
    computed: {
        isEngineer() {
            if(!this.isProject) {
                return this.service.serviceable_type === "App\\Models\\Engineer";
            }else{
                return this.service.projectable_type === "App\\Models\\Engineer";
            }
        },
    },
};
</script>

<style></style>
