<template>
    <div class="app">
      <b-container fluid class="mt-5 mb-5">
        <b-row>
          <b-col>
            <h1>Codificador de números romanos a decimal</h1>
          </b-col>
          <b-col>
            <b-form v-model="input" @input="handleChange">
              <b-form-group>
                <label for="exampleInputEmail1">Número romanizado:</label>
                <b-form-control type="text" id="exampleInputEmail1" aria-describedby="emailHelp" v-model="input" required></b-form-control>
                <small id="emailHelp" class="form-text text-muted">Ingrese un número romanizado.</small>
              </b-form-group>
              <b-button type="submit" @click.prevent="convert">Convertir</b-button>
            </b-form>
          </b-col>
        </b-row>
		<hr>
        <b-container fluid>
          <b-row>
            <b-col>
              <h3>Resultado:</h3>
            </b-col>
            <b-col>
              <p v-if="result" class="text-success">{{ result }}</p>
              <p v-else class="text-danger">Error. El número romanizado no es válido.</p>
            </b-col>
          </b-row>
        </b-container>
      </div>
    </div>
  </template>
  <script lang='ts'>
  export default {
    data() {
      return {
        input: '',
        result: null
      }
    },
    methods: {
      handleChange(e) {
        this.input = e.target.value
      },
      convert() {
        const romanToDecimal = (roman: string): number => {
          let decimal = 0;

          for(let i = 0; i < roman.length; i++) {
            if(i + 1 < roman.length && roman[i] <= roman[i+1]) {
              decimal -= this.romanToDecimal(roman.slice(i, i+2));
            } else {
              decimal += this.romanToDecimal(roman.slice(i, i+1));
            }
          }

          return decimal;
        }

        if(this.input.match(/^[A-Za-z]+$/)) {
          const roman = this.input.toUpperCase();
          this.result = romanToDecimal(roman);
        } else {
          this.result = null;
        }
      }
    }
  }
</script>
<style>
</style>