<template>
  <div>
    <v-toolbar dark>
      <v-spacer />
      <v-toolbar-title>콘텐츠 리스트</v-toolbar-title>
      <v-spacer />
    </v-toolbar>

    <br>

    <v-container>
      <v-row>
        <v-col>
          <v-text-field
            v-model="utm_source"
            label="예) youtube, google"
          />
        </v-col>
        <v-col>
          <v-text-field
            v-model="utm_medium"
            label="예) email, cpc"
          />
        </v-col>
        <v-col>
          <v-text-field
            v-model="utm_campaign"
            label="예) 화이트데이"
          />
        </v-col>
        <v-col cols="2" />
        <v-col cols="4">
          <v-text-field
            v-model="search_word"
            label="콘텐츠 제목 혹은 크리에이터 닉네임을 입력하세요"
            @keyup.enter="search"
          >
            <v-btn
              slot="append"
              color="#9970ff"
              dark
              @click="search"
            >
              검색
            </v-btn>
          </v-text-field>
        </v-col>
      </v-row>
      <v-row>
        <v-col>
          <v-simple-table class="elevation-10">
            <template>
              <thead>
                <tr>
                  <th class="text-center">
                    콘텐츠 번호
                  </th>
                  <th class="text-center">
                    썸네일
                  </th>
                  <th class="text-center">
                    제목
                  </th>
                  <th class="text-center">
                    내용
                  </th>
                  <th class="text-center">
                    큐레이션
                  </th>
                  <th class="text-center">
                    크리에이터
                  </th>
                  <th class="text-center">
                    테마
                  </th>
                  <th class="text-center">
                    태그
                  </th>
                  <th class="text-center">
                    가격
                  </th>
                  <th class="text-center">
                    19금
                  </th>
                  <th class="text-center">
                    시간
                  </th>
                  <th class="text-center">
                    듣기
                  </th>
                  <th class="text-center">
                    등록일
                  </th>
                  <th class="text-center">
                    관리
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="item in audio_contents"
                  :key="item.audioContentId"
                >
                  <td>{{ item.audioContentId }}</td>
                  <td align="center">
                    <v-img
                      max-width="100"
                      max-height="100"
                      :src="item.coverImageUrl"
                      class="rounded-circle"
                    />
                    <br>
                    <a
                      :href="item.coverImageUrl"
                      class="v-btn v-btn--outlined"
                    >
                      Download Image
                    </a>
                  </td>
                  <td>{{ item.title }}</td>
                  <td style="max-width: 350px !important; word-break:break-all; height: auto;">
                    {{ item.detail }}
                  </td>
                  <td>{{ item.curationTitle || '없음' }}</td>
                  <td>{{ item.creatorNickname }}</td>
                  <td>{{ item.theme }}</td>
                  <td style="max-width: 200px !important; word-break:break-all; height: auto;">
                    {{ item.tags }}
                  </td>
                  <td v-if="item.price > 0">
                    {{ item.price }} 코인
                  </td>
                  <td v-else>
                    무료
                  </td>
                  <td>
                    <div v-if="item.isAdult">
                      O
                    </div>
                    <div v-else>
                      X
                    </div>
                  </td>
                  <td>{{ item.remainingTime }}</td>
                  <td>
                    <vuetify-audio
                      :file="item.contentUrl"
                      :downloadable="true"
                      :auto-play="false"
                    />
                  </td>
                  <td>{{ item.date }}</td>
                  <td>
                    <v-row>
                      <v-col>
                        <v-btn
                          :disabled="is_loading"
                          @click="showModifyDialog(item)"
                        >
                          수정
                        </v-btn>
                      </v-col>
                      <v-spacer />
                      <v-col>
                        <v-btn
                          :disabled="is_loading"
                          @click="deleteConfirm(item)"
                        >
                          삭제
                        </v-btn>
                      </v-col>
                      <v-spacer />
                      <v-col>
                        <v-btn
                          :disabled="is_loading"
                          @click="shareAudioContent(item)"
                        >
                          공유
                        </v-btn>
                      </v-col>
                    </v-row>
                  </td>
                </tr>
              </tbody>
            </template>
          </v-simple-table>
        </v-col>
      </v-row>
      <v-row class="text-center">
        <v-col>
          <v-pagination
            v-model="page"
            :length="total_page"
            circle
            @input="next"
          />
        </v-col>
      </v-row>
    </v-container>

    <v-row>
      <v-dialog
        v-model="show_modify_dialog"
        max-width="1000px"
        persistent
      >
        <v-card>
          <v-card-title>
            콘텐츠 수정
          </v-card-title>
          <v-card-text>
            <v-row align="center">
              <v-col cols="4">
                제목
              </v-col>
              <v-col cols="8">
                <v-text-field
                  v-model="audio_content.title"
                  label="제목"
                  required
                />
              </v-col>
            </v-row>
          </v-card-text>
          <v-card-text>
            <v-row align="center">
              <v-col cols="4">
                내용
              </v-col>
              <v-col cols="8">
                <v-text-field
                  v-model="audio_content.detail"
                  label="내용"
                  required
                />
              </v-col>
            </v-row>
          </v-card-text>
          <v-card-text>
            <v-row>
              <v-col cols="4">
                19금
              </v-col>
              <v-col cols="8">
                <input
                  v-model="audio_content.is_adult"
                  type="checkbox"
                >
              </v-col>
            </v-row>
          </v-card-text>
          <v-card-text>
            <v-row>
              <v-col cols="4">
                댓글 가능
              </v-col>
              <v-col cols="8">
                <input
                  v-model="audio_content.is_comment_available"
                  type="checkbox"
                >
              </v-col>
            </v-row>
          </v-card-text>
          <v-card-text>
            <v-row>
              <v-col cols="4">
                기본 커버이미지로 변경
              </v-col>
              <v-col cols="8">
                <input
                  v-model="audio_content.is_default_cover_image"
                  type="checkbox"
                >
              </v-col>
            </v-row>
          </v-card-text>
          <v-card-text>
            <v-row>
              <v-col cols="4">
                큐레이션
              </v-col>
              <v-col cols="8">
                <v-select
                  v-model="audio_content.curation_id"
                  :items="curations"
                  item-text="title"
                  item-value="value"
                  label="큐레이션 선택"
                />
              </v-col>
            </v-row>
          </v-card-text>
          <v-card-actions v-show="!is_loading">
            <v-spacer />
            <v-btn
              color="blue darken-1"
              text
              @click="cancel"
            >
              취소
            </v-btn>
            <v-btn
              color="blue darken-1"
              text
              @click="modify"
            >
              수정
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-row>

    <v-dialog
      v-model="show_delete_confirm_dialog"
      max-width="400px"
      persistent
    >
      <v-card>
        <v-card-text />
        <v-card-text>
          "{{ selected_audio_content.title }}"을 삭제하시겠습니까?
        </v-card-text>
        <v-card-actions v-show="!is_loading">
          <v-spacer />
          <v-btn
            color="blue darken-1"
            text
            @click="deleteCancel"
          >
            취소
          </v-btn>
          <v-btn
            color="blue darken-1"
            text
            @click="deleteAudioContent"
          >
            확인
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import * as api from '@/api/audio_content'
import * as dynamicLink from "@/api/firebase_dynamic_link";

import VuetifyAudio from 'vuetify-audio'

export default {
    name: "AudioContentList",

    components: {VuetifyAudio},

    data() {
        return {
            is_loading: false,
            show_modify_dialog: false,
            show_delete_confirm_dialog: false,
            page: 1,
            total_page: 0,
            search_word: '',
            audio_content: {},
            audio_contents: [],
            curations: [],
            selected_audio_content: {},
            utm_source: '',
            utm_medium: '',
            utm_campaign: '',
        }
    },

    async created() {
        await this.getCurations()
        await this.getAudioContent()
    },

    methods: {
        notifyError(message) {
            this.$dialog.notify.error(message)
        },

        notifySuccess(message) {
            this.$dialog.notify.success(message)
        },

        deleteConfirm(item) {
            this.selected_audio_content = item
            this.show_delete_confirm_dialog = true
        },

        deleteCancel() {
            this.selected_audio_content = {}
            this.show_delete_confirm_dialog = false
        },

        showModifyDialog(item) {
            this.selected_audio_content = item

            this.audio_content.id = item.audioContentId
            this.audio_content.title = item.title
            this.audio_content.detail = item.detail
            this.audio_content.curation_id = item.curationId
            this.audio_content.is_adult = item.isAdult
            this.audio_content.is_comment_available = item.isCommentAvailable
            this.audio_content.is_default_cover_image = false

            console.log(this.audio_content)

            this.show_modify_dialog = true
        },

        cancel() {
            this.selected_audio_content = {}
            this.audio_content = {}
            this.show_modify_dialog = false
            this.show_delete_confirm_dialog = false
        },

        async modify() {
            if (
                this.audio_content.title === null ||
                this.audio_content.title === undefined ||
                this.audio_content.title.trim().length <= 0
            ) {
                this.notifyError("제목을 입력하세요")
                return
            }

            if (
                this.audio_content.detail === null ||
                this.audio_content.detail === undefined ||
                this.audio_content.detail.trim().length <= 0
            ) {
                this.notifyError("내용을 입력하세요")
                return
            }

            if (this.is_loading) return;

            this.isLoading = true

            try {
                const request = {
                    id: this.audio_content.id,
                    isDefaultCoverImage: this.audio_content.is_default_cover_image
                }

                if (
                    this.selected_audio_content.title !== this.audio_content.title &&
                    this.audio_content.title.trim().length > 0
                ) {
                    request.title = this.audio_content.title
                }

                if (
                    this.selected_audio_content.detail !== this.audio_content.detail &&
                    this.audio_content.detail.trim().length > 0
                ) {
                    request.detail = this.audio_content.detail
                }

                if (this.selected_audio_content.curationId !== this.audio_content.curation_id) {
                    request.curationId = this.audio_content.curation_id
                }

                if (this.selected_audio_content.isAdult !== this.audio_content.is_adult) {
                    request.isAdult = this.audio_content.is_adult
                }

                if (this.selected_audio_content.isCommentAvailable !== this.audio_content.is_comment_available) {
                    request.isCommentAvailable = this.audio_content.is_comment_available
                }

                console.log(request)
                const res = await api.modifyAudioContent(request)
                if (res.status === 200 && res.data.success === true) {
                    this.cancel()
                    this.notifySuccess('수정되었습니다.')

                    this.audio_contents = []
                    await this.getAudioContent()
                } else {
                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
                }
            } catch (e) {
                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
            } finally {
                this.is_loading = false
            }
        },

        async deleteAudioContent() {
            if (this.is_loading) return;
            this.is_loading = true

            try {
                let request = {id: this.selected_audio_content.audioContentId, isActive: false}

                const res = await api.modifyAudioContent(request)
                if (res.status === 200 && res.data.success === true) {
                    this.cancel()
                    this.notifySuccess('삭제되었습니다.')

                    this.audio_contents = []
                    await this.getAudioContent()
                } else {
                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
                }
            } catch (e) {
                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
            } finally {
                this.is_loading = false
            }
        },

        async next() {
            if (this.search_word.length < 2) {
                this.search_word = ''
                await this.getAudioContent()
            } else {
                await this.searchAudioContent()
            }
        },

        async getCurations() {
            this.is_loading = true
            try {
                const res = await api.getCurations()
                if (res.status === 200 && res.data.success === true) {
                    this.curations = res.data.data.map((curation) => {
                        return {title: curation.title, value: curation.id}
                    })

                    this.curations.unshift({title: '없음', value: 0})
                } else {
                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
                }
            } catch (e) {
                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
            } finally {
                this.is_loading = false
            }
        },

        async getAudioContent() {
            this.is_loading = true
            try {
                const res = await api.getAudioContentList(this.page)
                if (res.status === 200 && res.data.success === true) {
                    const data = res.data.data

                    const total_page = Math.ceil(data.totalCount / 10)
                    this.audio_contents = data.items

                    if (total_page <= 0)
                        this.total_page = 1
                    else
                        this.total_page = total_page
                } else {
                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
                }

                this.is_loading = false
            } catch (e) {
                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
                this.is_loading = false
            }
        },

        async search() {
            this.page = 1
            await this.searchAudioContent()
        },

        async searchAudioContent() {
            if (this.search_word.length === 0) {
                await this.getAudioContent()
            } else if (this.search_word.length < 2) {
                this.notifyError('검색어를 2글자 이상 입력하세요.')
            } else {
                this.is_loading = true
                try {
                    const res = await api.searchAudioContent(this.search_word, this.page)
                    if (res.status === 200 && res.data.success === true) {
                        const data = res.data.data

                        const total_page = Math.ceil(data.totalCount / 10)
                        this.audio_contents = data.items

                        if (total_page <= 0)
                            this.total_page = 1
                        else
                            this.total_page = total_page
                    } else {
                        this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
                    }

                    this.is_loading = false
                } catch (e) {
                    this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
                    this.is_loading = false
                }
            }
        },

        async shareAudioContent(item) {
            this.is_loading = true
            try {
                const linkData = await dynamicLink.shareAudioContent(item, this.utm_source, this.utm_medium, this.utm_campaign);
                if (linkData.status === 200) {
                  await navigator.clipboard.writeText(linkData.data.shortLink)
                  this.notifySuccess("링크가 복사되었습니다.")
                } else {
                  this.notifyError("링크를 생성하지 못했습니다.")
                }
            } finally {
                this.is_loading = false
            }
        },
    }
}
</script>

<style scoped>

</style>
