<script setup>
import PageTitle from "@/components/global/PageTitle.vue";
import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import { useRouter } from 'vue-router'
import UserSubPageWrapper from "@/views/dashboards/superUserDashboard/user/UserSubPageWrapper.vue";
// Get the user from the route
const router = useRouter()
import {user, getUserData, userId, setUser} from "@/views/dashboards/superUserDashboard/user/SuperUserSelectedUserObject.vue";
import WhiteBox from "@/components/displays/boxes/WhiteBox.vue";
import UserVehicleSubscriptionsDisplay
  from "@/views/dashboards/superUserDashboard/user/displays/vehicles/UserVehicleSubscriptionsDisplay.vue";
import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
import UserFixedPricing from "@/views/dashboards/superUserDashboard/user/displays/UserFixedPricing.vue";
import UserDefaultDepartment from "@/views/dashboards/superUserDashboard/user/displays/UserDefaultDepartment.vue";

// Set the user
setUser(router.currentRoute.value.params.userId);

</script>

<template>
  <RestrictedPageWrapper :hasPermission="SessionUser.canAccessSuperUser()">
    <UserSubPageWrapper>
      <template #title>
        <PageTitle title="User" subtitle="User data" />
      </template>
    <div class="columns is-multiline">
      <!-- Customer small -->
      <div class="column is-12">
        <div class="card">
          <div class="card-header">
            <!-- User icon -->
            <div class="card-header-icon">
              <span class="icon">
                <i class="fas fa-user"></i>
              </span>
            </div>
            <!-- User name -->
            <div class="card-header-title">
              {{ user.economicData.name }}
            </div>
            <!-- User settings wheel -->
            <div class="card-header-icon">
              <ActionSettingsWheelButton
                  :user_id="userId"
                >
                <template #actions>
                  <!-- Since there's no additional actions, we can use the default slot -->
                </template>
              </ActionSettingsWheelButton>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-12">
        <div class="box">
          <!-- User fixed pricing -->
          <div class="mb-2">
            <UserFixedPricing v-if="user.customer_number.value && user.customer_number.value > 0" v-bind:customer_number="user.customer_number.value" />
          </div>
          <!-- Default department -->
          <div class="mb-2">
            <UserDefaultDepartment v-if="user.customer_number.value && user.customer_number.value > 0" v-bind:customer_number="user.customer_number.value" />
          </div>
          <!-- Vehicle subscriptions -->
          <UserVehicleSubscriptionsDisplay
              v-if="user.customer_number.value && user.customer_number.value > 0"
              :user="user"
            />
        </div>
      </div>
      <div class="column is-6">
        <div class="box">
          <h3 class="title is-4">User data</h3>
          <div class="content">
            <p>User ID: {{ userId }}</p>
            <p>Customer number: {{ user.customer_number }}</p>
            <p>Group ID: {{ user.group_id }}</p>
            <p>Created at: {{ user.created_at }}</p>
            <p>Updated at: {{ user.updated_at }}</p>
          </div>
        </div>
      </div>
      <!-- Economic data -->
      <div class="column is-6">
        <div class="box">
          <h3 class="title is-4">Economic data ({{ user.economicData.name ? user.economicData.name : 'No data' }})</h3>
          <div class="content">
            <p>Customer number: {{ user.economicData.customerNumber }}</p>
            <p>Name: {{ user.economicData.name }}</p>
            <p>Address: {{ user.economicData.address }}</p>
            <p>Zip: {{ user.economicData.zip }}</p>
            <p>City: {{ user.economicData.city }}</p>
            <p>Mobile phone: {{ user.economicData.mobilePhone }}</p>
            <p>Email: {{ user.economicData.email }}</p>
            <p>CVR: {{ user.economicData.cvr }}</p>
            <p>Currency: {{ user.economicData.currency }}</p>
            <p>Country: {{ user.economicData.country }}</p>
            <p>Barred: {{user.economicData.barred }}</p>
          </div>
        </div>
      </div>
      <!-- Permissions -->
      <div class="column is-12">
        <div class="box">
          <h3 class="title is-4">Permissions</h3>
          <div class="content">
            <ul>
              <li v-for="permission in user.permissions.value" :key="permission.id">{{ permission }}</li>
            </ul>
          </div>
        </div>
      </div>
      <!-- Variables -->
      <div class="column is-12">
        <div class="box">
          <h3 class="title is-4">Variables</h3>
          <div class="content">
            <p>SessionUser: {{ SessionUser.valueOf() }}</p>
            <p>userId: {{ userId }}</p>
            <p>user: {{ user.valueOf() }}</p>
          </div>
        </div>
      </div>
    </div>
    </UserSubPageWrapper>
  </RestrictedPageWrapper>
</template>

<style scoped>

</style>