<template>
  <BubbleBox 
    ref="followBubbleBoxRef"
    v-bind="props"
    @clickOnHolder="emit('contentClick');hideTip()"
  >
    <template #content>
      <FlexRow justify="space-between" align="center">
        <Text :text="content" v-bind="contentTextProps" :wrap="false" touchable @click="emit('contentClick');hideTip()" />
        <IconButton v-if="closeButton" v-bind="closeButtonProps" :icon="closeButton" @click="emit('close');hideTip()" />
      </FlexRow>
    </template>
    <slot />
  </BubbleBox>
</template>

<script setup lang="ts">
import Text, { type TextProps } from '../basic/Text.vue';
import BubbleBox, { type BubbleBoxProps } from './BubbleBox.vue';
import FlexRow from '../layout/FlexRow.vue';
import IconButton, { type IconButtonProps } from '../basic/IconButton.vue';
import { onMounted, ref, watch } from 'vue';

export interface BubbleTiProps extends Partial<BubbleBoxProps> {
  show?: boolean;
  content?: string;
  contentTextProps?: TextProps;
  closeButton?: string;
  closeButtonProps?: IconButtonProps;
}

const props = withDefaults(defineProps<BubbleTiProps>(), {
  content: '',
  contentTextProps: () => ({
    color: 'white',
    fontConfig: 'contentText',
  }),
  closeButton: 'close',
  closeButtonProps: () => ({
    size: 26,
    color: 'white',
  }),
  backgroundColor: 'rgba(0,0,0,0.9)',
  radius: 10,
  clickOutSideClose: false
});

const emit = defineEmits(['contentClick', 'close', 'update:show']);

const followBubbleBoxRef = ref<InstanceType<typeof BubbleBox>>();

watch(() => props.show, (newVal) => {
  if (newVal)
    followBubbleBoxRef.value?.show();
  else 
    followBubbleBoxRef.value?.hide();
});

function hideTip() {
  emit('update:show', false);
}

onMounted(() => {
  setTimeout(() => {
    if (props.show)
      followBubbleBoxRef.value?.show();
  }, 300);
});

defineOptions({
  options: {
    virtualHost: true,
    styleIsolation: "shared",
  }
})
</script>

<style lang="scss">
</style>
