<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import CurrencySelect from "@/components/CurrencySelect";
import Card from "@/components/Containers/ContentCard";
import Button from "@/Jetstream/Button";
import Badge from "@/components/General/Badge";
import TaglineManager from "./Partials/TaglineManager.vue";
import ProfileLink from "@/components/General/ProfileLink.vue";
export default {
    props: {
        user: Object,
    },
    components: {
        AppLayout,
        CurrencySelect,
        Card,
        Button,
        Badge,
        TaglineManager,
        ProfileLink,
    },
    mounted() {
        // this.$inertia.visit(this.route("dashboard"));
    },
    data() {
        return {
            socials: ["facebook", "twitter", "instagram", "linkedin"],
        };
    },
    methods: {
        getSocialLink(social) {
            return this.user.socials[social]?.link;
        },
    },
};
</script>

<template>
    <AppLayout
        :title="user.isCurrentUser ? 'My profile' : `${user.name}'s profile`"
    >
        <div class="container py-10 max-w-7xl">
            <div class="flex flex-col gap-5 lg:flex-row">
                <div class="flex-1">
                    <Card class="flex-1" :padding="false">
                        <div class="relative z-0 w-full">
                            <img
                                class="object-cover w-full rounded-t-2xl max-h-48 no-magnify"
                                :src="user.cover_photo_path"
                                alt="profile header"
                            />
                        </div>
                        <div class="-translate-y-[80px]">
                            <div
                                class="container relative flex items-center justify-center select-none"
                            >
                                <span
                                    class="p-[10px] bg-white rounded-full overflow-hidden"
                                >
                                    <img
                                        class="object-cover aspect-square w-[150px] h-[150px] rounded-full overflow-hidden no-magnify"
                                        :src="user.profile_photo_url"
                                        alt="profile image"
                                    />
                                </span>
                            </div>
                            <div
                                class="flex flex-col justify-center py-2 gap-2.5"
                            >
                                <Badge
                                    class="mx-auto"
                                    rounded="rounded-lg"
                                    size="md"
                                >
                                    <span
                                        class="flex items-center justify-center gap-2 text-xs font-medium"
                                    >
                                        <svg
                                            width="16"
                                            height="16"
                                            viewBox="0 0 16 16"
                                            fill="none"
                                            xmlns="http://www.w3.org/2000/svg"
                                        >
                                            <path
                                                d="M10.3335 3.66675L8.3335 2.66675L8.66683 5.00008L7.3335 6.33341L9.3335 6.66675L10.3335 8.66675L11.3335 6.66675L13.3335 6.33341L12.0002 5.00008L12.3335 2.66675L10.3335 3.66675Z"
                                                stroke="#29419B"
                                                stroke-width="1.25"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                            />
                                            <path
                                                d="M2.6665 13.3333L7.33317 8.66659"
                                                stroke="#29419B"
                                                stroke-width="1.25"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                            />
                                            <path
                                                d="M6 13.3333L8.33333 10.9999"
                                                stroke="#29419B"
                                                stroke-width="1.25"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                            />
                                            <path
                                                d="M2.6665 10L4.99984 7.66667"
                                                stroke="#29419B"
                                                stroke-width="1.25"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                            />
                                        </svg>
                                        {{ $t("Register.business") }}
                                    </span>
                                </Badge>
                                <div class="flex flex-col justify-center">
                                    <h1
                                        class="text-xl font-medium text-center text-gray-300"
                                    >
                                        {{ user.name }}
                                    </h1>
                                    <TaglineManager v-model:user="user" />
                                </div>
                                <div
                                    v-if="user.is_current_user"
                                    class="mx-auto"
                                >
                                    <Button
                                        :href="route('settings.security.show')"
                                        type="link"
                                        size="sm"
                                        buttonStyle="outline"
                                    >
                                        <span
                                            class="flex items-center justify-center gap-1"
                                        >
                                            <svg
                                                width="17"
                                                height="16"
                                                viewBox="0 0 17 16"
                                                fill="none"
                                                xmlns="http://www.w3.org/2000/svg"
                                            >
                                                <path
                                                    d="M6.49984 4.66675H4.49984C4.14622 4.66675 3.80708 4.80722 3.55703 5.05727C3.30698 5.30732 3.1665 5.64646 3.1665 6.00008V12.0001C3.1665 12.3537 3.30698 12.6928 3.55703 12.9429C3.80708 13.1929 4.14622 13.3334 4.49984 13.3334H10.4998C10.8535 13.3334 11.1926 13.1929 11.4426 12.9429C11.6927 12.6928 11.8332 12.3537 11.8332 12.0001V10.0001"
                                                    stroke="#222222"
                                                    stroke-width="1.25"
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                />
                                                <path
                                                    d="M6.5 10.0001H8.5L14.1667 4.3334C14.4319 4.06819 14.5809 3.70848 14.5809 3.3334C14.5809 2.95833 14.4319 2.59862 14.1667 2.3334C13.9015 2.06819 13.5417 1.91919 13.1667 1.91919C12.7916 1.91919 12.4319 2.06819 12.1667 2.3334L6.5 8.00007V10.0001Z"
                                                    stroke="#222222"
                                                    stroke-width="1.25"
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                />
                                                <path
                                                    d="M11.1665 3.33325L13.1665 5.33325"
                                                    stroke="#222222"
                                                    stroke-width="1.25"
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                />
                                            </svg>

                                            {{ $t("Register.edit") }}
                                        </span>
                                    </Button>
                                </div>
                            </div>
                        </div>
                    </Card>
                </div>
                <div class="flex flex-col w-full gap-5 lg:flex-1 lg:max-w-xs">
                    <Card title="Register.social_links">
                        <template v-if="user.is_current_user" #actions>
                            <Button
                                :href="route('settings.show') + '#social-links'"
                                type="link"
                                size="sm"
                                buttonStyle="outline"
                            >
                                <span
                                    class="flex items-center justify-center gap-1"
                                >
                                    <svg
                                        width="17"
                                        height="16"
                                        viewBox="0 0 17 16"
                                        fill="none"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <path
                                            d="M6.49984 4.66675H4.49984C4.14622 4.66675 3.80708 4.80722 3.55703 5.05727C3.30698 5.30732 3.1665 5.64646 3.1665 6.00008V12.0001C3.1665 12.3537 3.30698 12.6928 3.55703 12.9429C3.80708 13.1929 4.14622 13.3334 4.49984 13.3334H10.4998C10.8535 13.3334 11.1926 13.1929 11.4426 12.9429C11.6927 12.6928 11.8332 12.3537 11.8332 12.0001V10.0001"
                                            stroke="#222222"
                                            stroke-width="1.25"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                        <path
                                            d="M6.5 10.0001H8.5L14.1667 4.3334C14.4319 4.06819 14.5809 3.70848 14.5809 3.3334C14.5809 2.95833 14.4319 2.59862 14.1667 2.3334C13.9015 2.06819 13.5417 1.91919 13.1667 1.91919C12.7916 1.91919 12.4319 2.06819 12.1667 2.3334L6.5 8.00007V10.0001Z"
                                            stroke="#222222"
                                            stroke-width="1.25"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                        <path
                                            d="M11.1665 3.33325L13.1665 5.33325"
                                            stroke="#222222"
                                            stroke-width="1.25"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                    </svg>

                                    {{ $t("Register.edit") }}
                                </span>
                            </Button>
                        </template>
                        <ul class="flex flex-col w-full gap-5">
                            <li
                                v-for="social in socials"
                                :key="'link_' + social"
                            >
                                <ProfileLink
                                    :link="getSocialLink(social)"
                                    :type="social"
                                />
                            </li>
                        </ul>
                    </Card>
                    <Card class="flex-1 !overflow-auto" title="Register.share">
                        <template v-if="user.is_current_user" #actions>
                            <Button
                                :href="route('settings.show') + '#profile-url'"
                                type="link"
                                size="sm"
                                buttonStyle="outline"
                            >
                                <span
                                    class="flex items-center justify-center gap-1"
                                >
                                    <svg
                                        width="17"
                                        height="16"
                                        viewBox="0 0 17 16"
                                        fill="none"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <path
                                            d="M6.49984 4.66675H4.49984C4.14622 4.66675 3.80708 4.80722 3.55703 5.05727C3.30698 5.30732 3.1665 5.64646 3.1665 6.00008V12.0001C3.1665 12.3537 3.30698 12.6928 3.55703 12.9429C3.80708 13.1929 4.14622 13.3334 4.49984 13.3334H10.4998C10.8535 13.3334 11.1926 13.1929 11.4426 12.9429C11.6927 12.6928 11.8332 12.3537 11.8332 12.0001V10.0001"
                                            stroke="#222222"
                                            stroke-width="1.25"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                        <path
                                            d="M6.5 10.0001H8.5L14.1667 4.3334C14.4319 4.06819 14.5809 3.70848 14.5809 3.3334C14.5809 2.95833 14.4319 2.59862 14.1667 2.3334C13.9015 2.06819 13.5417 1.91919 13.1667 1.91919C12.7916 1.91919 12.4319 2.06819 12.1667 2.3334L6.5 8.00007V10.0001Z"
                                            stroke="#222222"
                                            stroke-width="1.25"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                        <path
                                            d="M11.1665 3.33325L13.1665 5.33325"
                                            stroke="#222222"
                                            stroke-width="1.25"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                    </svg>

                                    {{ $t("Register.edit") }}
                                </span>
                            </Button>
                        </template>
                        <ul>
                            <ProfileLink
                                copy
                                :link="route('user.profile.slugged', user.slug)"
                                :type="'muhandisin'"
                            />
                        </ul>
                    </Card>
                </div>
            </div>
        </div>
    </AppLayout>
</template>
