<template>
  <meta-head title="Пожаловаться на контент"></meta-head>

  <modal-feed
    :modal-feed="modalFeed"
    :is_exist_menu="false"
    :open="show"
    @close-modal="closeModal"
  />

  <div class="mt-16 md:container !max-w-5xl mx-auto px-2 md:px-6 2xl:px-28 buttons-filter-line">
    <form class=" bg-indigo-200 shadow-classic rounded-md p-5" @submit.prevent="submit">
      <div class="mb-4 flex items-center text-gray-light text-lg font-medium">
        <link-back class="default block hover:underline">
          Вернуться
        </link-back>
        <span class="px-3">/</span>
        <h1 class="text-gray">
          Пожаловаться на контент
        </h1>
      </div>

      <div class="mt-8 grid grid-cols-2">
        <div class="space-y-4">
          <div v-for="reason in reasons" :key="reason.id"
               class="flex"
          >
            <input :id="`reason_${reason.id}`" v-model="form.reason"
                   :value="reason.id" name="reason"
                   type="radio" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
            >
            <label :for="`reason_${reason.id}`" class="select-none ml-3 text-gray leading-none">{{ reason.name }}</label>
          </div>
        </div>
        <div>
          <feed-preview class="ml-auto w-20 h-20 lg:w-48 lg:h-48 object-cover cursor-pointer"
                        :type="feed.type"
                        :source="feed.entity.preview"
                        @click="openModal(feed)"
          />
        </div>
      </div>

      <div class="mt-12 flex flex-wrap -my-1 -mx-3">
        <progress
          v-if="form.progress"
          class="mx-3 my-1 w-full"
          :value="form.progress.percentage"
          max="100"
        >
          {{ form.progress.percentage }}%
        </progress>

        <loading-button :loading="form.processing" class="mx-3 my-1 transition shadow-none hover:shadow-classic2 inline-flex items-center px-8 py-3 justify-center  text-base rounded-md text-white bg-orange focus:outline-none"
                        type="submit"
        >
          Отправить
        </loading-button>

        <link-back class="mx-3 my-1 transition shadow-none hover:shadow-classic inline-flex items-center px-8 py-3 justify-center text-base rounded-md text-white bg-indigo-300 focus:outline-none">
          Отменить
        </link-back>
      </div>
    </form>
  </div>
</template>

<script>
import { useForm, usePage } from '@inertiajs/inertia-vue3'
import { toRefs } from 'vue'
import Layout from '@/Shared/Layout.vue'
import MetaHead from '@/Shared/MetaHead.vue'
import LinkBack from '@/Shared/Misc/LinkBack.vue'
import LoadingButton from '@/Shared/Form/LoadingButton.vue'
import ModalFeed from '@/Shared/Overlay/ModalFeed.vue'
import FeedPreview from '@/Shared/Feed/FeedPreview.vue'

export default {
    components: {
        MetaHead,
        LoadingButton,
        ModalFeed,
        FeedPreview,
        LinkBack,
    },
    layout: Layout,
    props: {
        feed: Object,
        user: Object,
        reasons: Array,
    },
    setup(props) {
        const { feed } = toRefs(props)
        const form = useForm({
            reason: null,
            feed: feed.value.id,
        })
        const submit = () => {
            form.post(route('complaint.store'))
            form.reason = null
        }

        return {
            form,
            submit,
        }
    },
    data() {
        return {
            show: false,
            modalFeed: {},
        }
    },
    computed: {
        authUser() {
            return usePage().props.value.auth.user
        },
    },

    methods: {
        openModal(feed) {
            this.show = true
            this.modalFeed = feed
        },
        closeModal() {
            this.show = false
        },
    },
}
</script>
