<template>
  <ElRow :gutter="16" class="dual-pane">
    <ElCol :span="12">
      <SystemItemsPanel
        :group-code="groupCode"
        :items="systemItems"
        :hidden-ids="hiddenIds"
        :disabled="!overrideEnabled"
        @updated="$emit('refresh')"
      />
    </ElCol>
    <ElCol :span="12">
      <CustomItemsPanel
        :group-code="groupCode"
        :system-group="systemGroup"
        :tenant-group-id="tenantGroupId"
        :items="customItems"
        :override-enabled="overrideEnabled"
        @refresh="$emit('refresh')"
        @tenant-group-created="$emit('tenant-group-created', $event)"
        @sort-pending="$emit('sort-pending', $event)"
      />
    </ElCol>
  </ElRow>
</template>

<script setup lang="ts">
  import SystemItemsPanel from './SystemItemsPanel.vue'
  import CustomItemsPanel from './CustomItemsPanel.vue'

  defineOptions({ name: 'DualPaneView' })

  interface Props {
    groupCode: string
    systemGroup?: Api.Dictionary.DictionaryGroupDto | null
    tenantGroupId?: string | null
    systemItems: Api.Dictionary.DictionaryItemDto[]
    customItems: Api.Dictionary.DictionaryItemDto[]
    hiddenIds: string[]
    overrideEnabled: boolean
  }

  withDefaults(defineProps<Props>(), {
    systemGroup: null,
    tenantGroupId: null,
    systemItems: () => [],
    customItems: () => [],
    hiddenIds: () => [],
    overrideEnabled: false
  })

  defineEmits<{
    (event: 'refresh'): void
    (event: 'tenant-group-created', group: Api.Dictionary.DictionaryGroupDto): void
    (event: 'sort-pending', value: boolean): void
  }>()
</script>

<style scoped>
  .dual-pane {
    width: 100%;
  }
</style>
