const { inject, computed } = Vue;

export default {
  name: 'AgentCell',
  props: {
    agent: { type: Object, required: true }
  },
  setup(props) {
    const appState = inject('appState');

    const compactClass = computed(() => appState.isCompact.value ? 'agent-cell-compact' : '');
    const nameClass = computed(() => appState.isCompact.value ? 'agent-cell-name-compact' : 'agent-cell-name');
    const highlightBtnClass = computed(() => [
      'agent-cell-highlight-btn',
      appState.highlightedRowId.value === props.agent.id ? 'agent-cell-highlight-btn-active' : ''
    ]);

    return { ...appState, compactClass, nameClass, highlightBtnClass };
  },
  template: `
    <div
      class="planner-grid-left-col agent-cell-root agent-row-left-col cursor-pointer agent-cell-hover-trigger relative-position"
      :class="compactClass"
      @click="openProfile(agent)"
    >
      <q-avatar :size="isCompact ? '24px' : '32px'" class="shadow-1">
        <img :src="agent.avatar">
      </q-avatar>
      <div class="q-ml-sm overflow-hidden col">
        <div class="text-weight-bold truncate" :class="nameClass">{{ agent.name }}</div>
        <div v-if="!isCompact" class="agent-cell-role text-grey-5 uppercase text-weight-bold truncate">{{ agent.role }}</div>
      </div>
      <q-btn
        round
        flat
        dense
        :icon="highlightedRowId === agent.id ? 'visibility_off' : 'visibility'"
        :color="highlightedRowId === agent.id ? 'amber-9' : 'grey-4'"
        size="sm"
        :class="highlightBtnClass"
        @click.stop="toggleRowHighlight(agent.id)"
      >
        <q-tooltip>{{ highlightedRowId === agent.id ? 'Turn off reading mode' : 'Highlight Row' }}</q-tooltip>
      </q-btn>
    </div>
  `
};