<script setup lang="ts">
import { BranchWithChildren } from 'stores/branch/types';
import KebabAction from './shared/KebabAction.vue';

const nodes = defineModel<(any | BranchWithChildren)[]>('nodes', {
  default: [],
});

const expandedTree = defineModel<string[]>('expandedTree', { default: [] });

withDefaults(
  defineProps<{
    typeTree: 'product' | 'branch';
    color?: string;
    nodeKey?: string;
    labelKey?: string;
    childrenKey: string;
    action?: boolean;
  }>(),
  {
    color: 'transparent',
    nodeKey: 'id',
    labelKey: 'name',
  },
);

defineEmits<{
  (e: 'handleHold', node: any): void;
  (e: 'select', node: any): void;
  (e: 'create', node: any): void;

  (e: 'view', node: any): void;
  (e: 'edit', node: any): void;
  (e: 'delete', node: any): void;
  (e: 'changeStatus', node: any): void;
}>();
</script>

<template>
  <q-tree
    :nodes="nodes"
    :color="color"
    :node-key="nodeKey"
    :label-key="labelKey"
    :children-key="childrenKey"
    :no-nodes-label="$t('general.noData')"
    v-model:expanded="expandedTree"
    style="color: var(--foreground)"
  >
    <template #default-header="{ node }">
      <div
        class="full-width q-py-xs"
        :class="{
          'clickable-node': typeTree === 'product' || node.isHeadOffice,
          'cursor-pointer':
            node.type === 'group' ||
            node.type === 'type' ||
            node.type === 'productService',
          'active-node': expandedTree[expandedTree.length - 1] === node.id,
        }"
        v-touch-hold.mouse="() => $emit('handleHold', node)"
        @click.stop="
          async () => {
            $emit('select', node);
          }
        "
        :id="`tree-enter-${node.name}${node.for ? `-${node.for}` : ''}`"
      >
        <div class="row col items-center justify-between full-width no-wrap">
          <q-icon
            v-if="
              node.type === 'group' ||
              (node.isHeadOffice && node._count.branch !== 0)
            "
            name="mdi-triangle-down"
            size="12px"
            class="app-text-muted q-mr-md q-ml-sm"
            :style="`rotate: ${expandedTree[0] === node.id ? '0deg' : '30deg'}`"
          />
          <div
            class="col row"
            :class="{
              'q-pl-sm q-py-xs':
                node.type === 'type' || node.type === 'productService',
            }"
            :style="`padding-left:${(node.type === 'group' && node._count.type === 0) || (node.isHeadOffice && node._count.branch === 0) ? '36px' : ''}`"
          >
            <span
              class="ellipsis col-12"
              style="white-space: nowrap"
              :class="{
                'text-weight-bold':
                  expandedTree[expandedTree.length - 1] === node.id,
                'app-text-info':
                  expandedTree[expandedTree.length - 1] === node.id,
              }"
            >
              {{ node.name }}
            </span>
            <span class="app-text-muted text-caption ellipsis">
              {{ node.code }}
            </span>
          </div>

          <div
            class="row q-gutter-xs items-center no-wrap app-text-muted-2"
            v-if="$q.screen.gt.xs"
          >
            <slot></slot>
            <q-btn
              v-if="typeTree === 'product' && !node.actionDisabled"
              icon="mdi-eye-outline"
              :id="`btn-tree-eye-${node.name}`"
              size="sm"
              dense
              round
              flat
              @click.stop="() => $emit('view', node)"
            />

            <q-btn
              v-if="node.isHeadOffice && typeTree === 'branch'"
              :id="`create-sub-branch-btn-${node.name}`"
              @click.stop="$emit('create', node)"
              icon="mdi-file-plus-outline"
              class="app-text-muted-2"
              size="sm"
              dense
              round
              flat
            />

            <KebabAction
              v-if="action && !node.actionDisabled"
              :disable-delete="node.status !== 'CREATED'"
              :id-name="node.name"
              :status="node.status"
              @view="$emit('view', node)"
              @edit="$emit('edit', node)"
              @delete="$emit('delete', node)"
              @change-status="$emit('changeStatus', node)"
            />
          </div>
        </div>
      </div>
    </template>
  </q-tree>
</template>

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