<!-- +-------------------------------------------------+
 - © 2002-2004 PMB Services / www.sigb.net pmb@sigb.net et contributeurs (voir www.sigb.net)
 - +-------------------------------------------------+
 - $Id: FieldCard.vue,v 1.1 2026/07/23 gneveu Exp $
-->
<template>
    <div class="prefillingform-revue-card" :class="'prefillingform-revue-card-' + statusKey">
        <p class="prefillingform-revue-card-label">
            {{ field.label }}
            <span class="prefillingform-revue-card-zone">{{ field.zone }}</span>
            <span v-if="field.index" class="prefillingform-revue-card-occurrence">{{ occurrenceLabel }}</span>
            <span v-if="divergent" class="prefillingform-tag prefillingform-tag-warning">
                {{ messages.get('prefillingform_panel', 'prefillingform_revue_divergence') }}
            </span>
        </p>

        <div v-if="field.currentValue" class="prefillingform-revue-line prefillingform-revue-current-row">
            <span class="prefillingform-revue-current-label">{{ messages.get('prefillingform_panel', 'prefillingform_revue_current') }}</span>
            <span class="prefillingform-revue-line-value">{{ field.currentValue }}</span>
            <button type="button" class="bouton" :disabled="isKept" @click="$emit('keep')">
                {{ messages.get('prefillingform_panel', 'prefillingform_revue_keep') }}
            </button>
        </div>

        <div v-for="(prop, index) in field.propositions" :key="prop.sourceId + '-' + index" class="prefillingform-revue-line prefillingform-revue-prop-row">
            <span class="prefillingform-badge" :class="'prefillingform-badge-' + prop.origin">{{ originLabel(prop.origin) }}</span>
            <span class="prefillingform-revue-line-value">
                {{ prop.value }}
                <span v-if="prop.warn" class="prefillingform-warning-box">{{ messages.get('prefillingform_panel', prop.warn) }}</span>
            </span>
            <span v-if="divergent && prop.sourceId === priorSourceId" class="prefillingform-tag">
                {{ messages.get('prefillingform_panel', 'prefillingform_revue_priority') }}
            </span>
            <button type="button" class="bouton" :title="messages.get('prefillingform_panel', 'prefillingform_revue_accept')"
                :disabled="isAccepted(prop)" @click="$emit('accept', prop.sourceId)">
                {{ messages.get('prefillingform_panel', 'prefillingform_revue_accept') }}
            </button>
        </div>

        <div class="prefillingform-revue-card-footer">
            <span class="prefillingform-revue-card-status" :class="'prefillingform-revue-card-status-' + statusKey">
                {{ statusLabel }}
            </span>
            <button v-if="!isRejected" type="button" class="bouton" @click="$emit('reject')">
                {{ messages.get('prefillingform_panel', 'prefillingform_revue_reject') }}
            </button>
            <button v-if="decision" type="button" class="bouton" @click="$emit('cancel')">
                {{ messages.get('prefillingform_panel', 'prefillingform_revue_cancel') }}
            </button>
        </div>
    </div>
</template>

<script>
const ORIGIN_LABEL_KEYS = {
    source: 'prefillingform_badge_source',
    extrait: 'prefillingform_badge_extrait',
    genere: 'prefillingform_badge_genere',
};

export default {
    props: {
        field: {
            type: Object,
            required: true,
        },
        decision: {
            type: Object,
            default: null,
        },
        priorSourceId: {
            type: String,
            default: null,
        },
    },
    computed: {
        occurrenceLabel: function () {
            return this.messages.get('prefillingform_panel', 'prefillingform_revue_occurrence')
                .replace('{n}', this.field.index + 1);
        },
        divergent: function () {
            return new Set(this.field.propositions.map(function (p) { return p.value; })).size > 1;
        },
        isKept: function () {
            return !!this.decision && 'keep' === this.decision.type;
        },
        isRejected: function () {
            return !!this.decision && 'reject' === this.decision.type;
        },
        statusKey: function () {
            return this.decision ? this.decision.type : 'pending';
        },
        statusLabel: function () {
            const KEYS = {
                pending: 'prefillingform_revue_status_pending',
                accept: 'prefillingform_revue_status_accepted',
                keep: 'prefillingform_revue_status_kept',
                reject: 'prefillingform_revue_status_rejected',
            };
            return this.messages.get('prefillingform_panel', KEYS[this.statusKey]);
        },
    },
    methods: {
        isAccepted: function (prop) {
            return !!this.decision && 'accept' === this.decision.type && this.decision.source === prop.sourceId;
        },
        originLabel: function (origin) {
            return this.messages.get('prefillingform_admin', ORIGIN_LABEL_KEYS[origin] || ORIGIN_LABEL_KEYS.source);
        },
    },
};
</script>
