<template>
  <transition mode="out-in">
    <UiPopup
      v-if="isPlaylistEditOpen && currentStep === PlaylistStep.DeleteVideo"
      v-model="isPlaylistEditOpen"
      sheet
      transparent-backdrop
    >
      <template #title>{{ $t('remove_video') }}</template>

      <div
        :class="{'_loading': loadingAll}"
        class="playlist-delete-video__wrapper"
      >
        <CardVideoMini
          v-if="deletedVideo"
          :card="deletedVideo"
        />
        <p class="playlist-delete-video__text">{{ $t('confirm_remove_video') }}</p>
      </div>
      <template #footer>
        <div class="playlist-delete-video__buttons">
          <UiBtn
            :disabled="loadingAll"
            wide
            size="l"
            theme="secondary"
            @click="closePlaylistEdit"
          >{{ $t('cancel') }}
          </UiBtn>
          <UiBtn
            :disabled="loadingAll"
            wide
            size="l"
            theme="primary"
            @click="onBinClick"
          >{{ $t('remove') }}
          </UiBtn>
        </div>
      </template>

    </UiPopup>
  </transition>
</template>

<script setup lang="ts">
import { PlaylistStep } from '../../runtime';

const { isPlaylistEditOpen, closePlaylistEdit, currentStep, selectedPlaylist, deletedVideo } = usePlaylistEdit();
const { show } = useSnackbar();

const props = defineProps<{
  loadingDeleteVideo: boolean
  loadingPlaylistVideos: boolean
}>();

const route = useRoute();

const emit = defineEmits<{
  (eventName: 'delete-video', eventValue: {
    playlistId: string
    deletedVideoId: string
  }): void
}>();

const playlistId = computed(() => route.params[ 'playlistId' ] ? String(route.params[ 'playlistId' ]) : selectedPlaylist.value?.id ||  '');

async function onBinClick() {
  try {
    emit('delete-video', {
      playlistId: playlistId.value,
      deletedVideoId: deletedVideo.value?.id || ''
    });
    show('video_removed');
    closePlaylistEdit();
  } catch {
    console.log('error delete');
  }
}

const loadingAll = computed(() => props.loadingDeleteVideo || props.loadingPlaylistVideos);
</script>

<style lang="scss">
.playlist-delete-video__wrapper {
  display: grid;
  padding-inline: 8px;
  row-gap: 8px;
  padding-block: 8px;

  @include from-br(sm) {
    row-gap: 16px;
    padding-block: 16px;
    max-width: 400px;
    padding-inline: 16px;
  }
}

.playlist-delete-video__icon {
  color: $playlist-delete-video-icon;
  margin: 0 auto;
}

.playlist-delete-video__buttons {
  display: grid;
  gap: 8px;

  @include from-br(sm) {
    grid-template-columns: 1fr 1fr;
  }
}

.playlist-delete-video__text {
  @include font-xs;

  font-weight: 400;
  text-align: center;

  @include from-br(sm) {
    @include font-sm;
  }
}
</style>
