<template>
  <pn-page-template>
    <template #title>
      {{$t('mask__title')}}
    </template>

    <template #card-actions>
      <q-btn
        rounded color="primary"
        class="w100 fix-disabled-btn"
        @click="updateCompanies()"
        >
        {{ $t('mask__btn_ok') }}
      </q-btn>
    </template>

    <template #card-header>
      <div class="q-pa-md flex no-wrap items-center bg-grey-2">
        <q-icon name="mdi-information q-pr-sm" size="sm" color="primary"/>
        <span class="text-caption">
            {{ $t('mask__info_block')}}
        </span>
      </div>
    </template>

    <q-table
      flat
      :rows="displayCompanies"
      :columns="tableColumns"
      hide-pagination
      :pagination="{ rowsPerPage: 0 }"
      dense
      row-key="id"
      style="max-width: 100% !important"
      >
      <template #header>
        <q-tr>
          <q-th style="width: 10%">
            <q-icon name="mdi-domino-mask" size="sm"/>
          </q-th>
          <q-th style="width: 45%">
            <span class="text-bold">
              {{ $t('mask__table_header_company') }}
            </span>
          </q-th>
          <q-th style="width: 45%">
            <span class="text-bold">
              {{ $t('mask__table_header_visible') }}
              <q-btn
                flat
                @click="showDialogHelp=true"
                color="primary"
                dense round
                size="sm"
                icon="mdi-help-circle-outline"
              />
            </span>
          </q-th>
        </q-tr>
      </template>
            
      <template #body="props">
        <q-tr :props="props">
          <q-td key="checkbox" :props="props">
            <q-toggle
              v-model="props.row.masked"
              size="sm"
              :color="props.row.masked ? 'red' : 'primary'"
            />
          </q-td>
          <q-td key="name" :props="props">
              {{ props.row.name }}
          </q-td>
          <q-td key="visible" :props="props">
            <q-select
              v-if="props.row.masked"
              v-model="props.row.company_list"
              multiple
              :options="companiesSelect(props.row.id)"
              option-value="id"
              emit-value
              dense
              borderless
              dropdown-icon="mdi-plus"
              class="fix-select"
              :label-slot="!props.row.hasFocus && !props.row.isMenuOpen && (props.row.company_list.length === 0)"
              @popup-show="props.row.isMenuOpen = true"
              @popup-hide="props.row.isMenuOpen = false"
              @focus="props.row.hasFocus = true"
              @blur="props.row.hasFocus = false"
              >
                <template #label>
              <span
                v-if="(!props.row.hasFocus || !props.row.isMenuOpen) && (props.row.company_list.length === 0)"
                class="q-field__label"
              >
                {{ $t('mask__table_visible_none') }}
              </span>
            </template>
              <template #selected>
                <div
                  v-for="id in props.row.company_list"
                  :key=id
                  class="q-pa-xs"
                  >
                  <pn-auto-avatar
                    :img="getCompanyById(id)?.logo"
                    :name="getCompanyById(id)?.name"
                    size="md"
                    type="rounded"
                  />
                </div>
              </template>
              <template #option="scope">
                <q-item v-bind="scope.itemProps">
                  <q-item-section avatar>
                    <pn-auto-avatar
                      :img="scope.opt.logo"
                      :name="scope.opt.name"
                      size="md"
                      type="rounded"
                    />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>{{ scope.opt.name }}</q-item-label>
                  </q-item-section>
                </q-item>
              </template>
            </q-select>
            <span
              v-else
              >
              {{ $t('mask__table_visible_all') }}
            </span>
          </q-td>
          
        </q-tr>
      </template>
    </q-table>
    <div class="q-py-none flex column w100" style="min-height: 18px"/>
    
    <q-dialog v-model="showDialogHelp">
      <q-card class="q-ma-sm w100 rounded-card">
        <q-card-section class="row items-center q-pb-none">
          <span class="text-h6">
            <q-icon name="mdi-domino-mask"/>
            {{ $t('mask__help_title')}}
          </span>
          <q-space />
          <q-btn icon="close" flat round dense v-close-popup />
        </q-card-section>
        <q-card-section class="q-pt-sm">
          <p>{{ $t('mask__help_message1')}}</p>
          <p>{{ $t('mask__help_message2')}}</p>
        </q-card-section>
      </q-card>
    </q-dialog>
  </pn-page-template>
</template>
    
<script setup lang="ts">
  import { ref, computed, watch } from 'vue'
  import { useCompaniesStore } from 'stores/companies'
  import { useRouter } from 'vue-router'

  const showDialogHelp = ref<boolean>(false)
  const companiesStore =  useCompaniesStore()
  const router = useRouter()

  const companies = computed(() => companiesStore.companies)
  const companiesMask = computed(() => companiesStore.companiesMask)

  const tableColumns = [
    { name: 'checkbox', field: 'checkbox', label: 'checkbox', sortable: false, style: "width: 10%" },
    { name: 'name', field: 'name', align: 'left' as const, label: 'name', sortable: false, style: "width: 45% !important; text-wrap: auto" },
    { name: 'visible', field: 'visible', align: 'center' as const, label: 'visible', sortable: false, style: "width: 45% !important" }
  ]
  
  interface DisplayCompany {
    id: number
    name: string
    logo?: string
    masked: boolean
    company_list: number[],
    isMenuOpen: boolean
    hasFocus: boolean
  }

  const displayCompanies = ref<DisplayCompany[]>([])

  watch(
    () => [companies.value, companiesMask.value],
    () => {
      updateDisplayCompanies()
    },
    { immediate: true, deep: true }
  )

  function updateDisplayCompanies() {
    if (companies.value.length === 0) return
    
    displayCompanies.value = companies.value
      .filter(el => !el.is_own)
      .map(el => ({
        id: el.id,
        name: el.name,
        logo: el.logo ?? '',
        masked: companiesStore.checkCompanyMasked(el.id),
        company_list: getList(el.id),
        isMenuOpen: false,
        hasFocus: false
      }))
  }

  function getList (companyId: number) {
    const company = companiesMask.value.find(el => Number(el.company_id) === companyId)
    return company?.company_list ?? []
  }

  const mask = computed(() => displayCompanies.value
    .filter(el => el.masked)
    .map(el => ({
      company_id: el.id,
      company_list: el.company_list.sort(compareNumbers)
    }))
    .sort((a, b) => compareNumbers(a.company_id, b.company_id))
  )

  function getCompanyById (id: number) {
    return companies.value.find(c => c.id === id)
  }

  function companiesSelect (id :number) {
    return  displayCompanies.value
      .map(el => ({
        id: el.id,
        name: el.name,
        logo: el.logo 
      }))
      .filter(el => el.id !== id)
  }

  async function updateCompanies () {
    await companiesStore.updateMask(mask.value)
    router.back()
  }

  function compareNumbers (a: number, b: number): number {
    if (Number.isNaN(a)) return Number.isNaN(b) ? 0 : 1
    if (Number.isNaN(b)) return -1
    
    if (a === b) return 0
    return a < b ? -1 : 1
  }

</script>

<style scoped lang="scss">

  .fix-select :deep(.q-field__control) {
    align-items: center;
  }

  .fix-select :deep(.q-field__native) {
    justify-content: flex-end;
  }

  .fix-select :deep(.q-field__label.no-pointer-events) {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  :deep(.fix-select .q-icon) {
    color: $green-14 !important;
  }

  :deep(.masked .q-icon) {
    color: red;
  }

  :deep(.unmasked .q-icon) {
    color: 'primary';
  }
</style>
