<template>
  <meta-head title="Обновить видео"></meta-head>

  <modal-warning
    :feed_id="feed.id"
    :open="modalShow"
    @action="deleteActionModal"
  />

  <div class="mt-16 container mx-auto px-2 md:px-6 2xl:px-28 buttons-filter-line">
    {{ feed.status }}
    <div v-if="feed.status != 1" class="bg-indigo-200 shadow-classic rounded-md p-5 mb-10">
      <p class="text-lg font-medium text-gray">
        Контент запрещен к публикации, причина:
      </p>
      <p v-if="feed.status_note " class="text-gray-light">
        <ul>
          <li v-for="textBreak in textsBreak" :key="textBreak">
            {{ textBreak }}
          </li>
        </ul>
      </p>
      <p v-else class="text-gray-light">
        модерация созданного\обновленного контента
      </p>
      <p v-if="feed.status == 3" class="pt-3 text-green">
        Обновления отправлены, ожидайте!
      </p>
    </div>


    <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="space-y-5">
        <div class="flex flex-col">
          <text-input v-model="form.title" :error="form.errors.title"
                      type="text" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light"
                      label="Название"
          />
          <warning-text />
        </div>
        <div class="flex flex-col">
          <textarea-input v-model="form.body" :error="form.errors.body"
                          class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md" cols="30"
                          rows="4" label="Описание"
          />
        </div>

        <div class="flex flex-col">
          <file-input
            v-model="form.preview"
            accept="image/png, image/jpeg, image/jpg"
            :error="form.errors.preview"
            :label="textPreview()"
          />
        </div>

        <div v-if="mediaPreview" class="border border-indigo-300 p-4 rounded-md">
          <button type="button"
                  class="flex-shrink-0 px-6 py-2 bg-pink focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:outline-none focus:border-transparent rounded-sm text-sm text-white" @click="removePreview(mediaPreview.id)"
          >
            Удалить старое превью
          </button>
          <div class="mt-4 flex-shrink-0 self-start  overflow-hidden">
            <img class="object-contain h-48" :src="mediaPreview.url"
                 alt=""
            >
          </div>
        </div>



        <div class="border border-indigo-300 flex flex-col p-4 rounded-md">
          <file-input-multiple
            v-model="form.videos"
            accept=".mp4"
            :error="form.errors.videos"
            label="Загрузить новое видео"
          />
          <div>
            <h2 class="mt-3 mb-2 text-lg text-gray-light select-none">
              Загруженные видео:
            </h2>
            <div class="grid gap-2 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4">
              <created-media-item
                v-for="mediaCommon in mediasCommon"
                :key="mediaCommon.id" :type="feed.type"
                :media="mediaCommon"
                @addRemoveId="stateToggle"
              />
            </div>
          </div>
        </div>
        <div class="text-gray-light">
          <TagInput v-model="form.tags" />
        </div>
        <div v-if="isFreeFeed">
          <div class="text-gray-light text-lg mb-2">
            Тип контента
          </div>
          <div class="flex flex-wrap gap-4">
            <div class="flex items-center">
              <input id="feed-paid-1" v-model="form.is_paid"
                     value="0" type="radio"
                     class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
              >
              <label for="feed-paid-1" class="select-none ml-3 text-gray">Бесплатный</label>
            </div>
            <div class="flex items-center">
              <input id="feed-paid-2" v-model="form.is_paid"
                     value="1" type="radio"
                     class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
              >
              <label for="feed-paid-2" class="select-none ml-3 text-gray">Эксклюзивный</label>
            </div>
            <div v-if="authUser.private" class="flex items-center">
              <input id="feed-paid-3" v-model="form.is_paid"
                     value="2" type="radio"
                     class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
              >
              <label for="feed-paid-3" class="select-none ml-3 text-gray">Доступен по личной подписке</label>
            </div>
          </div>
        </div>
        <!-- <div class="flex items-center">
          <input id="is_adult_feed" v-model="form.is_adult"
                 type="checkbox"
                 class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
          >
          <label for="is_adult_feed" class="select-none ml-3 text-gray">Контент для взрослых</label>
        </div> -->
        <div v-if="form.is_paid == 1" class="space-y-5">
          <div class="flex flex-col">
            <text-input v-model="form.price" :error="form.errors.price"
                        type="number" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light"
                        label="Цена"
            />
          </div>
          <div class="border border-indigo-300 flex flex-col p-4 rounded-md space-y-3">
            <div v-if="isFreeFeed">
              <file-input-multiple
                v-model="form.videos_paid"
                :error="form.errors.videos_paid"
                accept=".mp4"
                label="Выбрать видео"
              />
            </div>
            <div v-if="mediasPaid.length">
              <h2 class="mb-2 text-lg text-gray-light select-none">
                Загруженные платные видео:
              </h2>
              <div class="grid gap-2 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4">
                <created-media-item
                  v-for="mediaPaid in mediasPaid" :key="mediaPaid.id"
                  :edit="false"
                  :type="feed.type"
                  :media="mediaPaid"
                />
              </div>
            </div>
          </div>
        </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>
        <button type="button" class="mx-3 my-1 default text-lg text-pink"
                @click="openModal"
        >
          Удалить
        </button>
      </div>
    </form>
  </div>
</template>

<script>
import find from 'lodash/find'
import { toRefs, watch, ref, computed } from 'vue'
import { useForm, usePage } from '@inertiajs/inertia-vue3'
import { Inertia } from '@inertiajs/inertia'

import Layout from '@/Shared/Layout.vue'
import MetaHead from '@/Shared/MetaHead.vue'
import FileInput from '@/Shared/Form/FileInput.vue'
import TextInput from '@/Shared/Form/TextInput.vue'
import FileInputMultiple from '@/Shared/Form/FileInputMultiple.vue'
import TextareaInput from '@/Shared/Form/TextareaInput.vue'
import TagInput from '@/Shared/Form/TagInput.vue'
import LoadingButton from '@/Shared/Form/LoadingButton.vue'
import LinkBack from '@/Shared/Misc/LinkBack.vue'
import WarningText from '@/Shared/Misc/WarningText.vue'
import CreatedMediaItem from '@/Shared/Edit/CreatedMediaItem.vue'
import ModalWarning from '@/Shared/Overlay/ModalWarning.vue'

export default {
    components: {
        MetaHead,
        CreatedMediaItem,
        TextInput,
        FileInput,
        FileInputMultiple,
        LoadingButton,
        WarningText,
        TextareaInput,
        LinkBack,
        TagInput,
        ModalWarning,
    },
    layout: Layout,
    props: {
        feed: Object,
        tags: Array,
        mediasCommon: Array,
        mediasPaid: Array,
        mediasCount: Number,
        mediaPreview: Object,
    },

    setup(props) {
        const { feed, tags, mediasCount, mediaPreview } = toRefs(props)

        const textsBreak = computed(() => feed.value.status_note.split('\n'))

        const modalShow = ref(false)

        // let isFeedPaid, openPaidBlock

        let form_fields = {
            id: feed.value.id,
            title: feed.value.title,
            body: feed.value.body,
            price: feed.value.price,
            tags: tags.value,
            is_paid: feed.value.is_paid,


            preview: null,
            videos: null,
            videos_paid: null,

            removedItems: [],
            totalItems: mediasCount,
        }
        if (feed.value.is_paid) {
            // isFeedPaid = ref(1)
            // openPaidBlock = ref(1)
            delete form_fields.videos_paid
        }
        //  else {
        //     isFeedPaid = ref(0)
        //     openPaidBlock = ref(0)
        // }

        const form = useForm(form_fields)

        // watch(isFeedPaid, (value) => {
        //     openPaidBlock.value = value
        //     form.is_paid = value
        // })

        const submit = () => {
            form.post(route('videos.update', feed.value.id), {
                onSuccess: () => {
                    form.reset('videos')
                    form.reset('videos_paid')
                    form.reset('preview')
                },
            })
        }

        const stateToggle = (id) => {
            let existID = find(form.removedItems, (itemID) => itemID === id)
            if (existID) {
                const index = form.removedItems.indexOf(existID)
                if (index > -1) {
                    form.removedItems.splice(index, 1)
                }
            } else {
                form.removedItems.push(id)
            }
        }

        const deleteActionModal = (remove) => {
            if (remove) {
                Inertia.delete(route('feed.destroy', feed.value.id), {
                    preserveScroll: true,
                    preserveState: true,
                })
            }
            modalShow.value = false
        }

        const openModal = () => (modalShow.value = true)

        const isFreeFeed = computed(() => feed.value.is_paid === 0)
        const authUser = computed(() => usePage().props.value.auth.user)
        const textPreview = () => {
            if (mediaPreview) {
                return 'Обновить превью'
            }
            return 'Загрузить превью'
        }

        const removePreview = (id) => {
            Inertia.delete(route('feed.preview.destroy', id))
        }

        return {
            form,
            submit,
            stateToggle,
            authUser,
            // isFeedPaid,
            // openPaidBlock,
            isFreeFeed,
            modalShow,
            deleteActionModal,
            openModal,
            textPreview,
            removePreview,
            textsBreak
        }
    },

    updated() {
        if (this.feed.is_paid) {
            delete this.form.videos_paid
        }
    },
}
</script>
