<script setup lang="ts">
import { computed, ComputedRef } from 'vue';
import type { Iteration } from '@/types/perceptron';

const props = defineProps<{
    iterations: Iteration[];
    trainingEnded: boolean;
    trainingEndReason: string;
}>();

// All weight in a simple array
const allWeightPerIteration: ComputedRef<number[][]> = computed(() => {
    return props.iterations.map((iteration) => {
        // We flatten the weights
        return iteration.weights.flat(2);
    });
});

const rowBgDark = computed(() => {
    let isEven = false;
    return props.iterations.map((iteration, index, arr) => {
        if (index > 0 && arr[index - 1].epoch !== iteration.epoch) {
            isEven = !isEven;
        }
        return isEven;
    });
});
</script>

<template>
    <table class="table w-full border-collapse border border-gray-300">
        <tr class="text-left" v-if="props.iterations.length > 0">
            <th>Époch</th>
            <th>Exemple</th>
            <th
                v-for="(weight, index) in allWeightPerIteration[
                    allWeightPerIteration.length - 1
                ]"
                v-bind:key="index"
            >
                X<sub>{{ index }}</sub>
            </th>
            <th>Erreur</th>
        </tr>
        <tr
            v-for="(iteration, index) in props.iterations"
            v-bind:key="index"
            :class="{
                'bg-gray-900': rowBgDark[index],
            }"
        >
            <td>{{ iteration.epoch }}</td>
            <td>{{ iteration.exampleIndex }}</td>
            <td
                v-for="(weight, index) in allWeightPerIteration[index]"
                v-bind:key="index"
            >
                {{ weight.toFixed(2) }}
            </td>
            <td>{{ iteration.error.toFixed(2) }}</td>
        </tr>

        <tr v-if="props.trainingEnded" class="bg-red-900 text-center">
            <td colspan="100%">
                <strong>Entraînement terminé :</strong>
                {{ props.trainingEndReason }}
            </td>
        </tr>
    </table>
</template>
