<template>
   <n-message-provider>
        <FlashMessages 
            :messages="props.flashMessages"
        />
   </n-message-provider>
   <n-data-table 
      :columns="columns"
      :data="users"
      row-class-name="group"
   />
</template>

<script setup lang="ts">

import type { User } from '../../types/User'
import type { DataTableColumns } from 'naive-ui'
import type { VNode } from 'vue'

import { h } from 'vue'
import BELayout from '@/layouts/BELayout.vue'
import FlashMessages from '@/components/FlashMessages.vue'
import { NIcon, NButton, NDataTable, NMessageProvider } from 'naive-ui'

import {
   AdminPanelSettingsFilled as Admin,
   EditRound as Edit,
   DeleteRound as Delete,
} from '@vicons/material'

defineOptions({ layout: BELayout })

const props = defineProps<{
   users?: User[],
   flashMessages?: Object
}>()

const columns: DataTableColumns<User> = [
   {
      title: "Admin",
      key: "is_admin",
      align: "center",
      render (row) {
         if(row.is_admin) {
            return h(
               NIcon,
               { size: 20, component: Admin, class: "align-middle" }
            )
         }
      }
   },
   {
      title: "Benutzername",
      key: "username",
   },
   {
      title: "Aktionen",
      key: "actions",
      className: "space-x-4",
      render(row) {
         let arr: VNode[] = []
         arr[0] = h(
            NButton,
            { 
               class: "invisible group-hover:visible align-middle",
               circle: true,
               onClick: () => { clickEdit(row.id) },
               renderIcon: () => { return h(NIcon, { component: Edit, size: 20 }) },
            },
         )
         arr[1] = h(
            NButton,
            { 
               class: "invisible group-hover:visible align-middle",
               secondary: true,
               circle: true,
               type: "error",
               onClick: () => { clickDelete(row.id) },
               renderIcon: () => { return h(NIcon, { component: Delete, size: 20 }) },
            },
         )
         return arr
      }
   }
]

function clickEdit(id: Number){
   console.log("Edit clicked: "+id)
}

function clickDelete(id: Number){
   console.log("Delete clicked: "+id)
}

</script>