<template>
  <div class="d-flex flex-column h-100 pt-0">
    <div class="px-0 pb-2 new-style pt-0">
      <v-text-field
        v-model="search"
        density="compact"
        prepend-inner-icon="search"
        :placeholder="t('fields.search.placeholder')"
        variant="outlined"
        hide-details
        class="new-style pt-0"
      >
        <template #append-inner>
          <v-btn
            class="shark-400"
            icon="close"
            size="24"
            variant="text"
            @click="search = ''"
          />
        </template>
      </v-text-field>
    </div>
    <v-sheet
      class="overflow-auto"
      elevation="2"
    >
      <McadDataTableItems
        :items="parentMcads"
        is-primary
        :search="search"
      />
    </v-sheet>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useMcadStore } from '@/stores/mcad.store';
import { useI18n } from 'vue-i18n';
import { storeToRefs } from 'pinia';
import { DataOverlayMcad } from '@3cr/viewer-types-ts';

interface Props {
  items: DataOverlayMcad[];
}

withDefaults(defineProps<Props>(), {
  items: () => [],
});

const { t } = useI18n();
const { mcads, childKeys } = storeToRefs(useMcadStore());

const parentMcads = computed(() =>
  mcads.value.map((x) => x.Key).filter((x) => !childKeys.value.includes(x)),
);
const search = ref<string>('');

defineExpose({
  search,
});
</script>

<style scoped lang="scss">
.v-data-table {
  height: 100%;
  width: 100%;
}

:deep(.overflow) {
  max-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

<style lang="scss">
.v-data-table {
  background-color: var(--v-background-color);
  height: 100%;
  .active {
    background-color: rgb(var(--v-theme-minsk_050)) !important;
  }
}
.drag-drop {
  cursor: grab !important;
}

.drag-drop:active {
  cursor: grabbing !important;
}
</style>
