<template>
    <div class="highlight">
      <span v-for="part of sequenceHighlight" :class="part.styleClass">{{ part.nuclide }}</span>
    </div>
  </template>

<script>
export default {
  props: ['sequence', 'mask'],
  data() {
    return {}
  },
  computed: {
    sequenceHighlight() {
      const styleClass = {
        '0': 'other',
        '1': 'len1 Gs',
        '2': 'len2 Gs',
        '3': 'len3 Gs',
        '4': 'len4 Gs',
        '5': 'len1 Cs',
        '6': 'len2 Cs',
        '7': 'len3 Cs',
        '8': 'len4 Cs',
        'GC': 'gc-highlight', // Pridanie špeciálneho štýlu pre "GC"
      }

      let codes = this.sequence
          .toUpperCase()
          .replace(/[ATU]/g, '0')
          .replace(/G+/g, x =>
              Math.min(4, x.length)
                  .toString()
                  .repeat(x.length)
          )
          .replace(/C+/g, x => (Math.min(4, x.length) + 4).toString().repeat(x.length))

      var ret = []

      for (var i = 0; i < this.sequence.length; i++) {
        if (this.sequence.substring(i, i + 2).toUpperCase() === "GC") {
          // Priradenie špeciálneho štýlu pre "G" v "GC"
          ret.push({
            styleClass: styleClass['GC'] + (this.mask && this.mask[i] === 'W' ? ' mutation' : ''),
            nuclide: 'G',
          })
          // Priradenie špeciálneho štýlu pre "C" v "GC"
          ret.push({
            styleClass: styleClass['GC'] + (this.mask && this.mask[i + 1] === 'W' ? ' mutation' : ''),
            nuclide: 'C',
          })
          i++; // Preskočiť ďalší znak, pretože "GC" je už spracované
        } else {
          var code = codes[i]
          ret.push({
            styleClass: styleClass[code] + (this.mask && this.mask[i] === 'W' ? ' mutation' : ''),
            nuclide: this.sequence[i].toUpperCase(),
          })
        }
      }
      return ret
    },
  },
}
</script>


<style scoped>
.gc-highlight {
  background-color: yellow; /* Žlté pozadie pre "GC" */
}
.mutation {
  background-color: gold;
  padding: 0.1rem;
  border: 1px solid darkgoldenrod;
  border-radius: 0.2rem;
}

.other {
  color: #666666;
}

.len1.Gs {
  color: #990000;
}
.len1.Cs {
  color: #000099;
}

.len2.Gs {
  color: #bb0000;
}
.len2.Cs {
  color: #0000bb;
}

.len3.Gs {
  color: #dd0000;
}
.len3.Cs {
  color: #0000dd;
}

.len4.Gs {
  color: #ff0000;
}
.len4.Cs {
  color: #0000ff;
}

.highlight {
  display: block;
  word-wrap: break-word;
  white-space: normal;
  padding: 0;
  margin: 0;
  line-height: 1;
  font-size: 1.3rem;
}
</style>