<script lang="ts" setup>
import type { TableColumn } from "@nuxt/ui"
import { h } from 'vue'

  definePageMeta({
    layout: "dashboard"
  });
  const color = useColorMode();
  color.preference = "dark";

  const cards: any[] = [
    {
      title: "1",
      icon: "meteor-icons:chevron-up",
      desc: "epah ya bro"
    },
    {
      title: "2",
      icon: "majesticons:award",
      desc: "bolinhas de natal ou whatever"
    },
    {
      title: "3",
      icon: "svg-spinners:clock",
      desc: "espera aí um becs bro"
    },

  ];
  // create the object itself
  type Payment = {
    id: string,
    date: string,
    status: string,
    email: string,
    amount: number

  }
  const table_demo = ref<Payment[]>([
    {
      id: '4600',
      date: '2024-03-11T15:30:00',
      status: 'paid',
      email: 'james.anderson@example.com',
      amount: 594
    },
    {
      id: '4599',
      date: '2024-03-11T10:10:00',
      status: 'failed',
      email: 'mia.white@example.com',
      amount: 276
    },
    {
      id: '4598',
      date: '2024-03-11T08:50:00',
      status: 'refunded',
      email: 'william.brown@example.com',
      amount: 315
    },
    {
      id: '4597',
      date: '2024-03-10T19:45:00',
      status: 'paid',
      email: 'emma.davis@example.com',
      amount: 529
    },
    {
      id: '4596',
      date: '2024-03-10T15:55:00',
      status: 'paid',
      email: 'ethan.harris@example.com',
      amount: 639
    }
  ])

  const table_headers: TableColumn<Payment>[] = [
    {
      accessorKey: 'id',
      header: "ID",
      cell: ({ row }) => `#${row.getValue('id')}`
    },
    {
      accessorKey: 'date',
      header: "Date",
      cell: ({ row }) => {
        return new Date(row.getValue('date')).toLocaleString("pt-PT",{
          day: "numeric",
          month: "short",
          hour: "2-digit",
          minute: "2-digit",
          hour12: false
        })
      }
    },
    {
      accessorKey: 'status',
      header: "Status",
      cell: ({row}) => {
        let color: string;
        switch(row.getValue('status')){
          case "paid":
            color = "success"; break;
          case "failed":
            color = "error"; break;
          case "refunded":
            color = "warning"; break;
          default:
            color = "neutral";
        }
        return h(UBadge, { class: "capitalize", variant: "subtle", color },
            () => row.getValue("status"))
        }
    },
    {
      accessorKey: 'amount',
      header: "Ammount",
      cell: ({ row }) => { return "€" + row.getValue('amount') }
    }
  ]

</script>

<template>
  <UContainer>
    
    <UDashboardSidebarToggle variant="subtle" class="absolute z-20 top-3 left-2.5"/>

    <div class="mt-1 mb-3 flex flex-col w-full relative z-0">
      <ProseH2 class="text-center m-0.5 w-full">Hey there, user!</ProseH2>
      <ProseP class="text-center text-muted m-0.5">Welcome to the UI!</ProseP>
      <UBadge variant="subtle" class="inline mx-auto">It's cool, isn't it ?</UBadge> 
    </div>
    
    <!--<div class="mx-auto max-w-220">-->
      <UPageGrid class="lg:grid-cols-3 lg:gap-0 not-lg:gap-3">
          <UPageCard 
            v-for="card in cards"
            :title="card.title"
            :description="card.desc"
            :icon="card.icon"
            variant="subtle"
            class="dark-widget-bg col-lg lg:rounded-none first:lg:rounded-l-2xl last:lg:rounded-r-2xl  sm:rounded-2xl"
          />
      </UPageGrid>


    <UTable :data="table_demo" :columns="table_headers"/>
  </UContainer>
</template>

<style scoped>
@import "bootstrap/dist/css/bootstrap-grid.css";

</style>