<template>
    <Card :title="$t('Register.client_info')">
        <div class="flex flex-col w-full gap-5">
            <div class="flex flex-row gap-x-3">
                <img
                    class="rounded-full w-[60px] h-[60px] no-magnify"
                    :src="user.profile_photo_url"
                    alt="avatar"
                />
                <div class="space-y-[5px]">
                    <Link
                        :href="route('user.profile.slugged', user.slug)"
                        class="text-sm font-medium grey-200"
                    >
                        {{ user.name }}
                    </Link>
                    <span
                        class="flex gap-1 text-sm leading-4 text-gray-200 line-clamp-1"
                    >
                        {{ user.tag_line }}
                    </span>
                    <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>
                        <span class="flex-1 line-clamp-1">
                            {{ address }}
                        </span>
                    </span>
                </div>
            </div>
            <div class="bg-blue-200 p-2.5 flex flex-col gap-2.5 rounded-lg">
                <div class="text-sm font-medium text-gray-300">
                    {{ $t("Register.projects") }}
                    <span class="block mt-1 text-green-300">
                        {{ project.user.projects_count }}
                    </span>
                </div>
                <div class="text-sm font-medium text-gray-300">
                    {{ $t("Register.total_spent") }}
                    <span class="block mt-1 text-green-300">
                        {{ currency(project.user.wallet.total_spent) }}
                    </span>
                </div>
            </div>
            <div v-if="proposal" class="w-full">
                <Contract
                    :type="type"
                    :project="project"
                    :proposal="proposal"
                />
            </div>
            <div
                v-if="
                    $page.props.current_user?.is_engineer ||
                    $page.props.current_user?.is_firm
                "
                class="w-full"
            >
                <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";
import Contract from "@/components/Contracts/BasicContract.vue";
import { Link } from "@inertiajs/inertia-vue3";
export default {
    props: {
        user: Object,
        address: String,
        project: Object,
        chat: Boolean,
        proposal: Object,
        type: { type: String, default: "worker" },
        isProject: { type: Boolean, default: true },
        worker_id: { type: Number, default: null },
        worker_type: { type: String, default: null },
    },
    components: {
        Card,
        Button,
        Contract,
        Link,
    },
    data() {
        return {
            form: useForm({
                message: {
                    text: "Hello 👋",
                    attachement: null,
                },
                chatable_id: this.project.id,
                project: this.isProject,
                worker_id: this.worker_id,
                worker_type: this.worker_type,
                user_id: this.user.id,
            }),
        };
    },
    methods: {
        chat() {
            this.form.post(route("chat.create.worker"), {
                preserveScroll: true,
                onSuccess: () => {},
                onError: (error) => {
                    console.error(error);
                },
            });
        },
    },
    mounted() {
        if (this.proposal) {
            this.form.worker_id = this.proposal.proposalable_id;
            this.form.worker_type = this.proposal.proposalable_type;
        }
    },
};
</script>

<style></style>
