<script setup>
import { customer_name, customer_id, customer_data, customer_attributes, loadCustomerAttributes, hideDiscountsCatalog, hidePricesCatalog, setHidePricesCatalog, setHideDiscountsCatalog, getHideDiscountsCatalog, getHidePricesCatalog, getUserDiscounts, user_discounts } from "@/components/shop/POSDepartmentProcess.vue";
import { createAttribute, deleteAttribute } from "@/components/shop/CustomerAttributes.vue";
import {ref, watch} from 'vue';
import 'bulma-switch/dist/css/bulma-switch.min.css';
import 'bulma-block-list/src/block-list.scss';
import {SessionUser} from "@/components/session/token/SessionUser.vue";
import {popperBox, popper, removePopperIfOpen, showPopperWithContent, showPopper} from "@/components/displays/PopperDefault.vue";
import RequiresPermission from "@/components/displays/permissionbased/RequiresPermission.vue";
import CustomerDiscountsDepartmentDisplay
  from "@/components/displays/department/pos/displays/CustomerDiscountsDepartmentDisplay.vue";
import ExpandableContentBox from "@/components/displays/boxes/ExpandableContentBox.vue";

const panel_tabs = ref([
  {
    name: 'Detaljer',
    active: true,
    permission: 'get_user'
  },
  {
    name: 'Regler',
    active: false,
    permission: 'list_customer_attributes'
  },
  {
    name: 'Genveje',
    active: false,
  },
  {
    name: 'Rabatter',
    active: false,
    permission: 'get_custom_prices_other'
  }
]);

const details = ref([
  {
    name: 'Kunde nummer',
    prop: 'customerNumber',
    icon: 'fas fa-user'
  },
  {
    name: 'Navn',
    prop: 'name',
    icon: 'fas fa-user'
  },
  {
    name: 'Adresse',
    prop: 'address',
    icon: 'fas fa-map-marker-alt'
  },
  {
    name: 'Postnummer',
    prop: 'zip',
    icon: 'fas fa-map-marker-alt'
  },
  {
    name: 'Kunde by',
    prop: 'city',
    icon: 'fas fa-map-marker-alt'
  },
  {
    name: 'Telefon',
    prop: 'mobilePhone',
    icon: 'fas fa-phone'
  },
  {
    name: 'Email',
    prop: 'email',
    icon: 'fas fa-envelope'
  },
  {
    name: 'CVR',
    prop: 'corporateIdentificationNumber',
    icon: 'fas fa-id-card'
  }
]);

const attributes = ref([
  {
    name: 'Kræver reference nr.',
    prop: 'requiresReferenceNumber',
    description: 'Når denne er sat, kræves der et reference nr. på ordren før den kan oprettes',
    icon: 'fas fa-cogs'
  },
  {
    name: 'Må ikke ydes tillægsydelser',
    prop: 'restrictAdditionalServices',
    description: 'Når denne er sat, kan der ikke tilføjes produkter i kategorien "addons" til ordren',
    icon: 'fas fa-cogs'
  },
  {
    name: 'Registreringsnumre på faktura linjer',
    prop: 'requiresRegistrationNumbersInvoice',
    description: 'Når denne er sat, bliver der sendt registreringsnumre med på alle faktura linjer',
    icon: 'fas fa-cogs'
  },
  {
    name: 'Fakturer alle ordrer individuelt',
    prop: 'invoiceAllOrdersIndividually',
    description: 'Når denne er sat, faktureres alle ordrer individuelt og ikke samlet',
    icon: 'fas fa-cogs'
  },
  {
    name: 'Må ikke ydes tank cleaning',
    prop: 'restrictTankCleaning',
    description: 'Når denne er sat, kan der ikke tilføjes produkter i kategorien "tank cleaning" til ordren',
    icon: 'fas fa-cogs'
  },
  {
    name: 'Må ikke ydes spot free',
    prop: 'restrictSpotFree',
    description: 'Når denne er sat, kan der ikke tilføjes produkter i kategorien "spot free" til ordren',
    icon: 'fas fa-cogs'
  },
  {
    name: 'Må ikke ydes indvendig vask',
    prop: 'restrictInteriorCleaning',
    description: 'Når denne er sat, kan der ikke tilføjes produkter i kategorien "interior cleaning" til ordren',
    icon: 'fas fa-cogs'
  },
  {
    name: 'Faktureres med Stripe',
    prop: 'invoiceWithStripe',
    description: 'Når denne er sat, faktureres ordren med Stripe',
    icon: 'fas fa-cogs'
  },
  {
    name: 'Only tank cleaning',
    prop: 'onlyTankCleaning',
    description: 'Når denne er sat, bliver kunden kategoriseret som "Tank cleaning" kunde.',
    icon: 'fas fa-cogs'
  }
]);

const shortcuts = ref([
  {
    name: 'Administrer kunde',
    icon: 'fas fa-user-edit',
    // Open link in new tab
    action: () => {
      SessionUser.adminUser.customers.fromCustomerNumber.getUserId(customer_id.value).then(response => window.open('/superuser/users/' + response.data.data.user_id, '_blank'));
    },
    visible: SessionUser.canAccessSuperUser()
  },
  {
    name: 'Vaskeabonnement & Specialaftaler',
    icon: 'fas fa-user-edit',
    // Open link in new tab
    action: () => {
      SessionUser.adminUser.customers.fromCustomerNumber.getUserId(customer_id.value).then(response => window.open('/superuser/users/' + response.data.data.user_id + '/other', '_blank'));
    },
    visible: SessionUser.canAccessSuperUser()
  },
]);



/** Check if an attribute is set in the customer attributes */
const hasAttribute = (prop) => {
  return customer_attributes.value.some(attribute => attribute.attribute === prop);
};
/** Fetch the customer attributes when the component is mounted */
loadCustomerAttributes();

const isCustomerDetailsExpanded = ref(false);

const customer_data_has_empty_details = () => {
  return details.value.some(detail => customer_data.value[detail.prop] === null || customer_data.value[detail.prop] === '');
};
</script>

<template>
  <div v-if="customer_name">
    <article class="">
      <div class="panel-block">
        <div class="columns is-vcentered is-multiline">
          <div class="column is-12">
            <span class="is-size-6 title"
            >{{ customer_name }}</span>
          </div>
          <div class="column">
            <div class="tabs is-small is-centered">
              <ul>
                <li v-for="(tab, index) in panel_tabs" :key="index" :class="{'is-active': tab.active}" @click="panel_tabs.forEach(tab => tab.active = false); tab.active = true">
                  <RequiresPermission :permission="tab.permission" v-if="tab.permission">
                    <a>
                      {{ tab.name }}
                    </a>
                  </RequiresPermission>
                  <a v-else>
                    {{ tab.name }}
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <template v-if="panel_tabs[0].active" v-for="detail in details" :key="detail.name">
        <!-- Details that's not empty (unless isCustomerDetailsExpanded is true) -->
        <a class="panel-block" v-if="customer_data[detail.prop] || isCustomerDetailsExpanded">
          <span class="panel-icon">
            <i :class="detail.icon" aria-hidden="true"></i>
          </span>
          <span style="width: 50%;">{{ detail.name }}</span><span class="has-text-right" style="width: 50%;">{{ customer_data[detail.prop] }}</span>
        </a>
      </template>
      <!-- Details that's empty, (If there are any) -->
      <ExpandableContentBox
          v-if="panel_tabs[0].active && customer_data_has_empty_details"
          @update:expanded="isCustomerDetailsExpanded = !isCustomerDetailsExpanded"
          v-bind:expanded="isCustomerDetailsExpanded"
      />
      <!-- Attributes -->
      <RequiresPermission permission="list_customer_attributes">
        <div class="panel-block" v-if="panel_tabs[1].active" v-for="attribute in attributes" :key="attribute.name">
          <span class="panel-icon">
            <i :class="attribute.icon" aria-hidden="true"></i>
          </span>
          <span style="width: 50%;"
                @mouseover="showPopper(
                              popperBox(
                              attribute.name,
                              attribute.description
                              ),
                              $event.target
                            )"
                @mouseleave="removePopperIfOpen()"
          >{{ attribute.name }}</span>
          <span class="has-text-right" style="width: 50%;">
            <span v-if="hasAttribute(attribute.prop)" @click="deleteAttribute(customer_id, attribute.prop).then(() => loadCustomerAttributes())">
              <span class="field">
                <input :id="attribute.prop"
                       type="checkbox" :name="attribute.prop"
                       class="switch" checked="checked"
                       :disabled="!SessionUser.hasPermission('delete_customer_attribute')"
                />
                <label :for="attribute.prop"></label>
              </span>
            </span>
            <span v-else @click="createAttribute(customer_id, attribute.prop).then(() => loadCustomerAttributes())">
              <span class="field">
                <input :id="attribute.prop"
                       type="checkbox" :name="attribute.prop"
                       class="switch" :disabled="!SessionUser.hasPermission('add_customer_attribute')"/>
                <label :for="attribute.prop"></label>
              </span>
            </span>
          </span>
        </div>
      </RequiresPermission>
      <!-- Shortcuts -->
      <template v-if="panel_tabs[2].active" v-for="shortcut in shortcuts" :key="shortcut.name">
        <RequiresPermission permission="access_super_user">
          <a class="panel-block">
            <span class="panel-icon">
              <i :class="shortcut.icon" aria-hidden="true"></i>
            </span>
            <span @click="shortcut.action">{{ shortcut.name }}</span>
          </a>
        </RequiresPermission>
      </template>
      <!-- Discounts -->
      <RequiresPermission permission="get_custom_prices_other">
        <div class="panel-block" v-if="panel_tabs[3].active">
          <CustomerDiscountsDepartmentDisplay/>
        </div>
      </RequiresPermission>
    </article>
    <div>
    </div>
  </div>
</template>

<style scoped>

</style>