<template>
  <a-dropdown v-model:open="showDropdown" :trigger="['click']" placement="bottomRight">
    <a-button type="default">
      <template #icon>
        <BarsOutlined />
      </template>
    </a-button>

    <template #overlay>
      <a-menu class="column-def-menu">
        <a-menu-item
          v-for="(filterSchemaLine, index) in filterSchemaLines"
          :key="windowNo + '_' + tabIndex + '_' + filterSchemaLine.fieldName"
        >
          <div class="column-item">
            <a-checkbox :checked="filterSchemaLine.visible" @update:checked="visibleChanged(filterSchemaLine)" />
            <span class="column-name" :class="{ 'column-red': filterSchemaLine.mandatory }">
              {{ Language.getDisplayNameTrl($i18n.locale, filterSchemaLine) }}
            </span>
            <div class="column-actions">
              <CaretUpOutlined class="action-icon" @click.stop="fieldUp(filterSchemaLine, index)" />
              <CaretDownOutlined class="action-icon" @click.stop="fieldDown(filterSchemaLine, index)" />
            </div>
          </div>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<script>
import { defineComponent } from 'vue';
import {
  BarsOutlined,
  CaretUpOutlined,
  CaretDownOutlined,
} from '@ant-design/icons-vue';
import FilterSchema from './FilterSchema.js';
import Language from '../../common/Language.js';
import vClickOutside from 'click-outside-vue3';

export default defineComponent({
  directives: {
    clickOutside: vClickOutside.directive,
  },

  components: {
    BarsOutlined,
    CaretUpOutlined,
    CaretDownOutlined,
  },

  props: {
    windowNo: {
      type: String,
      default: null,
    },
    tabIndex: {
      type: Number,
      default: null,
    },
    filterSchemaLines: {
      type: Array,
      default: () => [],
    },
  },

  emits: ['propertyChanged'],

  data() {
    return {
      showDropdown: false,
      Language,
    };
  },

  methods: {
    visibleChanged(filterSchemaLine) {
      const clone = FilterSchema.cloneFilterSchemaLine(filterSchemaLine);
      clone.visible = !clone.visible;
      this.$emit('propertyChanged', clone);
    },

    fieldUp(filterSchemaLine, index) {
      if (index <= 0) return;
      this.swapSortNo(index, index - 1);
    },

    fieldDown(filterSchemaLine, index) {
      if (index >= this.filterSchemaLines.length - 1) return;
      this.swapSortNo(index, index + 1);
    },

    swapSortNo(index1, index2) {
      const temp = this.filterSchemaLines[index1].sortNo;
      const clone1 = FilterSchema.cloneFilterSchemaLine(this.filterSchemaLines[index1]);
      const clone2 = FilterSchema.cloneFilterSchemaLine(this.filterSchemaLines[index2]);

      clone1.sortNo = this.filterSchemaLines[index2].sortNo;
      clone2.sortNo = temp;

      this.$emit('propertyChanged', clone1);
      this.$emit('propertyChanged', clone2);
    },

    onClickOutside(e) {
      if (!e.target.closest('.ant-btn')) {
        this.showDropdown = false;
      }
    },
  },
});
</script>

<style scoped>
.column-item {
  display: flex;
  align-items: center;
  width: 240px;
  padding: 8px 0;
}

.column-name {
  flex: 1;
  margin: 0 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.column-red {
  color: #ff4d4f;
}

.column-actions {
  display: flex;
  gap: 8px;
}

.action-icon {
  color: rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: color 0.3s;
}

.action-icon:hover {
  color: var(--ant-primary-color);
}

:deep(.column-def-menu) {
  max-height: 400px;
  overflow-y: auto;
}
</style>