<template>
  <div id="admin-home">
    <v-container>
      <v-row>
        <v-col>
          <v-card color="card" class="rounded-xl">
            <v-toolbar color="toolbar">
              <v-toolbar-title> Users </v-toolbar-title>
            </v-toolbar>
            <v-container>
              <h1 class="text-center" style="font-size: 69px">
                {{ admin.users }}
              </h1>
            </v-container>
          </v-card>
        </v-col>
        <v-col>
          <v-card color="card" class="rounded-xl">
            <v-toolbar color="toolbar">
              <v-toolbar-title> Themes </v-toolbar-title>
            </v-toolbar>
            <v-container>
              <h1 class="text-center" style="font-size: 69px">
                {{ admin.themes }}
              </h1>
            </v-container>
          </v-card>
        </v-col>
        <v-col>
          <v-card color="card" class="rounded-xl">
            <v-toolbar color="toolbar">
              <v-toolbar-title> Active Users (Today) </v-toolbar-title>
            </v-toolbar>
            <v-container>
              <h1 class="text-center" style="font-size: 69px">
                {{ admin.usersToday }}
              </h1>
            </v-container>
          </v-card>
        </v-col>
        <v-col>
          <v-card color="card" class="rounded-xl">
            <v-toolbar color="toolbar">
              <v-toolbar-title> Active Users (Week) </v-toolbar-title>
            </v-toolbar>
            <v-container>
              <h1 class="text-center" style="font-size: 69px">
                {{ admin.usersThisWeek }}
              </h1>
            </v-container>
          </v-card>
        </v-col>
        <v-col>
          <v-card color="card" class="rounded-xl">
            <v-toolbar color="toolbar">
              <v-toolbar-title> Messages </v-toolbar-title>
            </v-toolbar>
            <v-container>
              <h1 class="text-center" style="font-size: 69px">
                {{ admin.messages }}
              </h1>
            </v-container>
          </v-card>
        </v-col>
      </v-row>
      <v-row>
        <v-col>
          <Chart
            v-if="metrics"
            :chart-options="options"
            :chart-data="metrics.users"
            :height="250"
          />
        </v-col>
        <v-col>
          <Chart
            v-if="metrics"
            :chart-options="options"
            :chart-data="metrics.activeUsers"
            :height="250"
          />
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
import { Line as Chart } from "vue-chartjs/legacy"
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement
} from "chart.js"

ChartJS.register(
  Title,
  Tooltip,
  Legend,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement
)
export default {
  name: "AdminHome",
  components: {
    Chart
  },
  props: ["admin", "metrics"],
  data() {
    return {
      options: {
        responsive: true,
        maintainAspectRatio: false,
        title: {
          display: false
        }
      }
    }
  }
}
</script>

<style scoped></style>
