<template>
  <div
    class="button custom-button"
    :data-element="dataElement"
    :class="{
      active: isActive,
      [type]: type,
      disabled,
      [className]: className
    }"
    @click="disabled || !onClick ? NOOP() : onClick($event)"
    @dblclick="disabled ? NOOP : onDoubleClick"
    @mouseup="disabled ? NOOP : onDoubleClick"
    :disabled="disabled"
    :title="title"
  >
    <template v-if="img">
      <div v-if="isSVG" v-html="img" class="img"></div>
      <img v-else :src="img" alt="" class="img">
    </template>
    {{ content }}
    <span v-if="item.dropItem" class="text">{{ item.text }}</span>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { useViewerStore } from '@/stores/modules/viewer'
import { useDocumentStore } from '@/stores/modules/document'
import core from '@/core'
const useViewer = useViewerStore()
const useDocument = useDocumentStore()

const { item } = defineProps(['item'])
const {
  type,
  dataElement,
  title,
  disabled,
  className,

  initialState,
  states,
  mount,
  unmount,
} = item

const NOOP = (e) => {
  e?.stopPropagation()
  e?.preventDefault()
}

// statefulButton 有状态按钮
const activeState = ref(initialState);
const stateOptions = states[activeState.value];
const isActive = ref(false);

const { img } = stateOptions;
const isSVG = img?.trim().toLowerCase().startsWith('<svg');

const onClick = () => {
  updateState();
  stateOptions.onClick(stateOptions);
};

const updateState = () => {
  activeState.value = initialState;
};

const content = computed(() => {
  if (stateOptions.getContent instanceof Function) {
    return stateOptions.getContent(stateOptions);
  } else {
    return stateOptions.getContent;
  }
});

if (mount) {
  onMounted(() => {
    mount();
  });
}

if (unmount) {
  onUnmounted(() => {
    unmount();
  });
}
</script>

<style lang="scss">
.statefulButton {
  background-color: var(--c-right-side-info-tip-bg);
}
</style>