<template>
  <v-card>
    <v-card-title>
      <span class="headline">{{ $gettext('General information') }}</span>
    </v-card-title>
    <v-card-text>
      <v-row>
        <v-col cols="6">{{ $gettext('Creation date') }}</v-col>
        <v-col cols="6">{{ $date(account.date_joined) }}</v-col>
      </v-row>
      <v-row>
        <v-col cols="6">{{ $gettext('Last login date') }}</v-col>
        <v-col v-if="account.last_login" cols="6">
          {{ $date(account.last_login) }}
        </v-col>
        <v-col v-else cols="6">{{ $gettext('Never logged-in') }}</v-col>
      </v-row>
      <v-row>
        <v-col cols="6">{{ $gettext('Full name') }}</v-col>
        <v-col cols="6">{{ account.first_name }} {{ account.last_name }}</v-col>
      </v-row>
      <v-row>
        <v-col cols="6">{{ $gettext('Role') }} </v-col>
        <v-col cols="6">{{ account.role }}</v-col>
      </v-row>
      <v-row>
        <v-col cols="6">{{ $gettext('Language') }} </v-col>
        <v-col cols="6">{{
          languageStore.getLanguageLabel(account.language)
        }}</v-col>
      </v-row>
      <v-row>
        <v-col cols="6">{{ $gettext('Secondary email') }}</v-col>
        <v-col cols="6">{{ account.secondary_email }}</v-col>
      </v-row>
      <v-row>
        <v-col cols="6">{{ $gettext('Phone number') }}</v-col>
        <v-col cols="6">{{ account.phone_number }}</v-col>
      </v-row>
      <v-row>
        <v-col cols="6">{{ $gettext('Enabled') }}</v-col>
        <v-col cols="6">
          <v-icon
            :color="account.is_active ? 'success' : 'error'"
            :icon="account.is_active ? 'mdi-check-circle' : 'mdi-close-circle'"
            variant="flat"
          />
        </v-col>
      </v-row>
      <template v-if="account.mailbox">
        <v-row>
          <v-col cols="6">{{ $gettext('Quota') }} </v-col>
          <v-col v-if="account.mailbox.quota === '0'" cols="6">
            {{ $gettext('Unlimited') }}
          </v-col>
          <v-col v-else cols="6">
            <v-progress-linear
              :color="account.mailbox.quota_usage < 80 ? 'primary' : 'warning'"
              :model-value="account.mailbox.quota_usage"
              height="25"
              class="white--text"
            >
              <template #default="{ value }">
                {{ Math.ceil(value) }}% ({{ account.mailbox.quota }}
                {{ $gettext('MB') }})
              </template>
            </v-progress-linear>
          </v-col>
        </v-row>
        <v-row
          v-if="
            account.mailbox.message_limit !== null &&
            account.mailbox.message_limit !== undefined
          "
        >
          <v-col cols="6">{{ $gettext('Daily sending limit') }}</v-col>
          <v-col cols="6">
            <template v-if="account.mailbox.message_limit === 0">
              {{ $gettext('Sending forbidden') }}
            </template>
            <v-progress-linear
              v-else
              :color="
                account.mailbox.sent_messages_in_percent < 80
                  ? 'primary'
                  : 'warning'
              "
              :model-value="account.mailbox.sent_messages_in_percent"
              height="25"
              class="white--text"
            >
              <template #default="{ value }">
                {{ Math.ceil(value) }}% ({{ account.mailbox.message_limit }}
                {{ $gettext('messages') }})
              </template>
            </v-progress-linear>
          </v-col>
        </v-row>
      </template>
    </v-card-text>
  </v-card>
</template>

<script setup>
import { useLanguageStore } from '@/stores'

defineProps({ account: { type: Object, default: null } })

const languageStore = useLanguageStore()

await languageStore.getLanguages()
</script>
