<template>
  <table class="table">
    <tr class="row">
      <th class="table-title" v-text="$t('responsable.title')" />
      <td class="table-description" v-html="$t('responsable.description')" />
    </tr>
    <tr class="row">
      <th class="table-title" v-text="$t('purpose.title')" />
      <td class="table-description" v-html="purposeDescription" />
    </tr>
    <tr v-for="tablerow in $t('table')" :key="getTitle(tablerow)" class="row">
      <th class="table-title" v-text="getTitle(tablerow)" />
      <!-- eslint-disable vue/no-v-html -->
      <td class="table-description" v-html="getDescription(tablerow)" />
      <!-- eslint-enable vue/no-v-html -->
    </tr>
  </table>
</template>

<script lang="ts">
interface TableRow {
  title: string
  description: string
}
export default {
  props: {
    comunicationType: {
      type: String,
      validator: (value: string) =>
        ['commercial', 'newsletter', 'collaborator'].includes(value),
      default: 'commercial',
    },
  },
  computed: {
    purposeDescription() {
      return this.$t(`purpose.${this.comunicationType}`)
    },
  },
  methods: {
    getTitle(tablerow: unknown): string {
      const tableRow = tablerow as TableRow
      return tableRow.title
    },
    getDescription(tablerow: unknown): string {
      const tableRow = tablerow as TableRow
      return tableRow.description
    },
  },
  i18n: {
    messages: {
      es: {
        responsable: {
          title: 'Responsable:',
          description: 'HOLALUZ-CLIDOM, S.A.',
        },
        purpose: {
          title: 'Finalidad:',
          commercial: 'Envío de información comercial.',
          newsletter: 'Recepción de la newsletter.',
          collaborator:
            'Envío de la información sobre el proceso de colaboración.',
        },
        table: [
          {
            title: 'Legitimación:',
            description: 'Consentimiento expreso.',
          },
          {
            title: 'Destinatarios:',
            description:
              'No serán cedidos a terceros ajenos a los servicios prestados, salvo filiales, en su caso.',
          },
          {
            title: 'Derechos:',
            description:
              'Acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la información adicional.',
          },
          {
            title: 'Información adicional:',
            description:
              "Puede consultar la información addicional detallada sobre <a target='_blank' class='hl-link' href='https://www.holaluz.com/documentos-legales/politica-privacidad/'>Protección de datos en nuestra web.</a>",
          },
        ],
      },
      ca: {
        responsable: {
          title: 'Responsable:',
          description: 'HOLALUZ-CLIDOM, S.A.',
        },
        purpose: {
          title: 'Finalitat:',
          commercial: "Enviament d'informació comercial",
          newsletter: 'Recepció de la newsletter.',
          collaborator:
            'Enviament de la informació sobre el procés de col·laboració.',
        },
        table: [
          {
            title: 'Legitimació:',
            description: ' Consentiment exprés.',
          },
          {
            title: 'Destinataris:',
            description:
              'No seran cedides a tercers aliens als serveis prestats, excepte filials, en el seu cas.',
          },
          {
            title: 'Drets:',
            description:
              "Accedir, rectificar i suprimir les dades, així com altres drets, com s'explica en la informació addicional.",
          },
          {
            title: 'Informació addicional:',
            description:
              "Pot consultar la informació adicional detallada sobre <a target='_blank' class='hl-link' href='https://www.holaluz.com/ca/documents-legals/politica-privacitat/'> Protecció de dades en la nostra web.</a>",
          },
        ],
      },
      en: {
        responsable: {
          title: 'Data controller:',
          description: 'HOLALUZ-CLIDOM, S.A.',
        },
        purpose: {
          title: 'Purpose:',
          commercial: 'Sending commercial information. ',
          newsletter: 'Receiving the newsletter.',
          collaborator: 'Sending information about the collaboration process.',
        },
        table: [
          {
            title: 'Legitimation:',
            description: 'Express consent.',
          },
          {
            title: 'Recipients:',
            description:
              'Personal data will not be transferred to third parties outside the scope of the services provided, except for affiliated companies, if applicable.',
          },
          {
            title: 'Rights:',
            description:
              'Access, rectification and erasure of the data, as well as other rights, as explained in the additional information.',
          },
          {
            title: 'Additional information:',
            description:
              "You can check the additional information about <a target='blank' class='hl-link' rel='nofollow noopener' href='https://www.holaluz.com/en/legal-documents/privacy-policy/'>Data Protection on our web.</a>",
          },
        ],
      },
    },
  },
}
</script>

<style lang="postcss" scoped>
.table {
  color: var(--color-gray-dark);
  border-collapse: collapse;
  border-spacing: 0;
}

.row {
  background-color: var(--color-gray-lighter);

  &:nth-child(even) {
    background-color: var(--color-white-base);
  }
}

.table-title {
  padding: 0.75rem;
  width: 9.375rem;
}

.table-description {
  font-weight: 400;
  padding: 0.75rem;
}
</style>
