<template>
  <div :class="options.pointer
  ? 'cursor-pointer hover:bg-theme-100 dark:hover:bg-theme-900/25'
  : ''
  " class="flex items-center gap-4 transition-all duration-300 rounded-lg px-4 py-2">
    <div class="relative">
      <img v-if="character.avatar && !avatarError" :class="options.image_size" class="rounded-full object-cover"
        :src="$root.serveImg(character.avatar)" alt="" @error="handleImageError" />
      <i v-else-if="!character.avatar" class="ph ph-robot text-theme-400" :class="options.image_size"></i>
      <i v-else class="ph ph-robot text-theme-400" :class="options.image_size"></i>
    </div>
    <div class="flex-1">
      <h3 class="text-theme-300 flex gap-2 items-center font-semibold">
        <span :title="character.name" class="" :class="options.truncate ? 'truncate w-16' : ''">{{ character.name
          }}</span>
        <div v-if="character.available && options.show_status"
          class="border border-brand-400 rounded px-2 text-xs text-brand-300">
          {{ $root.translations.online }}
        </div>
        <div v-else-if="options.show_status" class="border border-theme-400 rounded px-2 text-xs text-theme-400">
          {{ $root.translations.unavailable }}
        </div>
        <div v-if="character.official" class="ph-fill ph-seal-check dark:text-amber-300 text-theme-500 text-lg"></div>
      </h3>
      <p v-if="character.bio && options.bio" class="text-sm text-theme-400">
        {{
        character.bio.length > 50 ? character.bio.slice(0, 50) + "..." : character.bio
        }}
      </p>
    </div>
    <button v-if="chatButton" @click="$router.push(`/chat/${character.id}`)"
      class="ph-fill py-0.5 px-1 rounded ph-chat " :class="character.palette ? '' : 'text-theme-400'"
      :style="{ color: character.palette ? character.palette[1] : '', backgroundColor: character.palette ? character.palette[0] : '' }"></button>
  </div>
</template>

<script>
export default {
  name: "CharacterModule",
  props: {
    character: {
      type: Object,
      required: true,
    },
    toolbox: {
      type: Object,
      required: false,
      default: () => ({
        report: true,
        clone: true,
      }),
    },
    chatButton: {
      type: Boolean,
      default: false,
    },
    palette: {
      type: Array,
      required: false,
    },
    options: {
      type: Object,
      required: false,
      default: () => ({
        pointer: false,
        show_status: false,
        truncate: false,
        image_size: "w-8 h-8",
        bio: false,
      }),
    },
  },
  data() {
    return {
      avatarError: false,
    };
  },
  methods: {
    handleImageError() {
      console.warn("IMAGE ERROR OCCURED")
      this.avatarError = true;
    },
  },
};
</script>