<template>
  <div class="block-pp-contact no-print">
    <BaseText class="title">{{ $_tr('title') }}</BaseText>

    <component-listing
      id="region-listing"
      :static-data="regions"
      :pagination="false"
      grid-gap="32px"
    >
      <template #default="{ item }">
        <div class="card-pp">
          <BaseText>{{ item.title }}</BaseText>

          <Link
            v-if="getCheckedData(item.ppRights, 'permission.update')"
            :href="setPPUserLink(item.ppRegionUUID)"
            :inline="false"
            class="edit"
          >
            <Icon :color="$_theme('colorAdmin')" icon="edit" size="xs" />
          </Link>

          <div class="contact">
            <template v-if="item.contact">
              <BaseText>{{ $_username(item.contact) }}</BaseText>

              <Link
                :href="`mailto:${item.contact.email}`"
                :external="true"
                :inline="false"
              >
                {{ item.contact.email }}
              </Link>
            </template>

            <BaseText v-else class="no-contact">
              {{ $_tr('noContact') }}
            </BaseText>
          </div>
        </div>
      </template>
    </component-listing>
  </div>
</template>

<script>
import { BaseText, Icon } from 'inside-collection/atoms'
import { Link } from 'inside-collection/components'

import { formatHref } from '@inside-library/helpers/Langs'

export default {
  name: 'BlockPPRegionalContact',
  $_i18nRootPath: 'customs.pp.CONTACT_PP',
  components: {
    BaseText,
    Icon,
    Link
  },
  props: {
    contacts: {
      type: Array
    }
  },
  computed: {
    regions() {
      const regions =
        this.contacts.length > 0 &&
        this.contacts
          .filter(region =>
            this.getCheckedData(region, 'regional_offices.data.0')
          )
          .map(region => ({
            ppRegionUUID: region.uuid,
            ppRights: region.admin,
            ...region.regional_offices.data[0],
            ...{ contact: region.contact.data[0] }
          }))

      return regions
        .reduce((acc, item, currentIndex) => {
          const index = regions.findIndex(el => el.uuid === item.uuid)

          if (index === currentIndex) {
            return [...acc, ...[item]]
          }

          return acc
        }, [])
        .sort((a, b) => a.title.localeCompare(b.title))
    }
  },
  methods: {
    setPPUserLink(uuid) {
      return formatHref(
        { name: 'PPSetUser', params: { uuid: uuid } },
        this.$_currentLang
      )
    }
  }
}
</script>

<style lang="scss" scoped>
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.block-pp-contact {
  .title {
    margin-bottom: var(--spacing-l);
    text-align: center;
    font-weight: 600;

    @include fontSize(26);
  }

  .card-pp {
    position: relative;
    padding: var(--spacing-l) var(--spacing-xl);
    border-left: 6px solid #507084;
    box-shadow: var(--shadow-default);

    .edit {
      position: absolute;
      top: 8px;
      right: 8px;

      .icon-ui {
        fill: var(--color-admin);
      }
    }

    > p {
      margin-bottom: var(--spacing-xxs);
      font-weight: var(--font-weight-bold);
      font-size: var(--font-size-h4);
    }

    .contact {
      p {
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-h5);

        &.no-contact {
          font-weight: var(--font-weight-normal);
        }
      }

      a {
        font-size: var(--font-size-h5);
        @include transition(color 0.4s);

        &:hover {
          color: var(--color-secondary);
        }
      }
    }
  }
}

.inside-radius {
  .block-pp-contact {
    .card-pp {
      border-radius: var(--radius-m);
    }
  }
}
</style>
