<template>
<div class="gradient-profile relative">
    <user-banner class="h-56 xl:h-80 bg-indigo-200" :user='user' size='hero' />
</div>

<div class="-mt-24 xl:-mt-32 relative xl:container xl:mx-auto px-2 md:px-3">
    <div class="flex flex-col md:flex-row">
        <div class="flex-shrink-0 self-center md:self-start md:mr-6 2xl:mr-10">
            <user-avatar :user='user' size='medium' class="shadow-classic object-cover w-48 h-48 xl:w-64 xl:h-64 text-5xl" />
        </div>
        <div class="w-full">
            <div class="h-24 xl:h-32 hidden md:block"></div>
            <div class="mt-2 ">

                <div class="-mx-2 -my-2 lg:-mx-4 lg:-my-4 flex flex-col md:flex-row flex-wrap xl:flex-nowrap">
                    <div class="max-w-[300px] text-center md:text-left mx-2 my-2 lg:mx-4 lg:my-4 flex flex-shrink-0 flex-col self-center md:self-start">
                        <h1 class="md:mb-3 text-2xl xl:text-4xl font-semibold text-white">{{ user.name }}</h1>
                        <h2 class="text-base xl:text-xl text-gray-light">@{{ user.username }}</h2>
                    </div>
                    <div class="mx-2 my-2 lg:mx-4 lg:my-4 self-center flex flex-1 flex-col">
                        <div class="md:mt-2">
                            <div class="flex 2xl:text-lg text-white -mx-4">
                                <inertia-link :href="route('profile.user', user.username)" class="block mx-4">
                                    <span class="text-orange">{{counts.feeds}}</span> {{countPosts}}
                                </inertia-link>
                                <inertia-link :href="route('profile.subs', user.username)" class="block mx-4">
                                    <span class="text-orange">{{counts.subscribers }}</span> {{countSubs}}
                                </inertia-link>
                                <inertia-link :href="route('profile.readers', user.username)" class="block mx-4">
                                    <span class="text-orange">{{counts.readers}}</span> в читаемых
                                </inertia-link>
                            </div>
                            <div class="mt-4 text-gray-light text-sm">{{user.about}}</div>
                        </div>
                    </div>

                    <div class="mx-2 my-2 lg:mx-4 lg:my-4 2xl:flex-shrink-0 self-center text-center">
                        <inertia-link v-if="user.is_auth_user" class="inline-flex tracking-wide items-center px-4 py-3 border border-white text-sm 2xl:text-base text-white rounded-full bg-transparent hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2" :href="route('setting.index')">
                            Редактировать профиль
                        </inertia-link>
                        <toggle v-else
                            @clicked='susbscribe'
                            :user_id='user.id'
                            :enabled="user.is_sub"
                            textin='Подписаться' textout='Отписаться' />
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>
</template>


<script>
import UserAvatar from "@/Shared/Misc/UserAvatar";
import UserBanner from "@/Shared/Misc/UserBanner";
import Toggle from "@/Shared/Form/Toggle";
import helper from "@/includes/helper";
import { Inertia } from "@inertiajs/inertia";

export default {
  components: {
    Toggle,
    UserAvatar,
    UserBanner,
  },
  props: {
    user: Object,
    counts: Object,
  },
  computed: {
    countPosts() {
      return helper.declNumPosts(this.counts.posts);
    },
    countReaders() {
      return helper.declNumReaders(this.counts.readers);
    },
    countSubs() {
      return helper.declNumSubs(this.counts.subscribers);
    },
  },

  methods: {
    susbscribe(user_id) {
      Inertia.post(
        route("users.subs", user_id),
        {},
        { preserveScroll: true, preserveState: true }
      );
    },
  },
};
</script>
