<template>
  <div v-if="isAutoPlayDialogVisible && TUIGlobal.isH5" class="auto-play-dialog">
    <div>{{ t('auto play failed') }}</div>
    <div class="auto-play-action" @click="handleResumePlaybackClick">{{ t('click to resume') }}</div>
  </div>
</template>

<script lang="ts">
export default {
  options: {
    virtualHost: true,
  },
};
</script>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from '../../../../adapter-vue';
import { TUIStore, StoreName, NAME, TUIGlobal } from '../../../../TUICallService/index';
import { useTranslate } from '../../../hooks';
const t = useTranslate();
// The onAutoPlayFailed event is listened in CallService at initialization time and its result is
// stored in TUIStore, so here we only need to sync the visibility from the store.
const isAutoPlayDialogVisible = ref(TUIStore.getData(StoreName.CALL, NAME.IS_SHOW_AUTO_PLAY_DIALOG));

const handleAutoPlayDialogVisibleChange = (value: boolean) => {
  isAutoPlayDialogVisible.value = value;
};

onMounted(() => {
  TUIStore.watch(StoreName.CALL, {
    [NAME.IS_SHOW_AUTO_PLAY_DIALOG]: handleAutoPlayDialogVisibleChange,
  });
});

onUnmounted(() => {
  TUIStore.unwatch(StoreName.CALL, {
    [NAME.IS_SHOW_AUTO_PLAY_DIALOG]: handleAutoPlayDialogVisibleChange,
  });
});

const handleResumePlaybackClick = () => {
  TUIStore.update(StoreName.CALL, NAME.IS_SHOW_AUTO_PLAY_DIALOG, false);
};
</script>

<style lang="scss" scoped>
.auto-play-dialog {
  background-color: #FFFFFF;
  position: absolute;
  top: 5.2%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 90%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  border-radius: 6px;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  font-family: PingFang SC;
  padding: 0px 10px;

  .auto-play-action {
    color: #1C66E5;
  }
}
</style>