import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    static values = {
        bucketSize: { type: Number, default: 20 },
    };

    static targets = [
        'hintType',
        'awardSection',
        'allAwards',
        'awardType',
        'popularityMinInput',
        'popularityMaxInput',
        'popularityValue',
        'popularityFill',
        'popularitySummary',
    ];

    connect() {
        this.toggleAwardSection();
        this.syncPopularityRange();
    }

    enforceMinOneChecked(event) {
        const checked = this.hintTypeTargets.filter((e) => e.checked);
        if (checked.length === 0) {
            event.target.checked = true;
        }
        this.toggleAwardSection();
    }

    toggleAwardSection() {
        const awardChecked = this.hintTypeTargets.find(
            (el) => el.name === 'hint_award'
        )?.checked;

        this.awardSectionTarget.style.display = awardChecked ? '' : 'none';
    }

    toggleAllAwards() {
        const checked = this.allAwardsTarget.checked;
        this.awardTypeTargets.forEach((el) => {
            el.checked = checked;
        });
    }

    syncAllAwards() {
        const allChecked = this.awardTypeTargets.every((el) => el.checked);
        this.allAwardsTarget.checked = allChecked;
    }

    syncPopularityRange(event) {
        if (
            !this.hasPopularityMinInputTarget
            || !this.hasPopularityMaxInputTarget
            || !this.hasPopularityValueTarget
        ) {
            return;
        }

        let min = Number(this.popularityMinInputTarget.value);
        let max = Number(this.popularityMaxInputTarget.value);

        if (event?.target === this.popularityMinInputTarget && min > max) {
            max = min;
            this.popularityMaxInputTarget.value = String(max);
        } else if (event?.target === this.popularityMaxInputTarget && max < min) {
            min = max;
            this.popularityMinInputTarget.value = String(min);
        } else if (min > max) {
            [min, max] = [max, min];
            this.popularityMinInputTarget.value = String(min);
            this.popularityMaxInputTarget.value = String(max);
        }

        this.popularityValueTarget.textContent = `${min}-${max}`;

        if (this.hasPopularityFillTarget) {
            const left = ((min - 1) / 9) * 100;
            const right = ((10 - max) / 9) * 100;
            this.popularityFillTarget.style.left = `${left}%`;
            this.popularityFillTarget.style.right = `${right}%`;
        }

        if (this.hasPopularitySummaryTarget) {
            this.popularitySummaryTarget.textContent =
                this.buildPopularitySummary(min, max);
        }
    }

    buildPopularitySummary(min, max) {
        const bucketSize = this.bucketSizeValue;

        if (min === 1 && max === 10) {
            return 'Tous les acteurs.';
        }

        const startRank = ((10 - max) * bucketSize) + 1;
        const endRank = min === 1 ? null : ((10 - min + 1) * bucketSize);

        if (max === 10) {
            return `Top ${(11 - min) * bucketSize} des acteurs les plus populaires.`;
        }

        if (endRank === null) {
            return `A partir du rang ${startRank} en popularite.`;
        }

        return `Rangs ${startRank} a ${endRank} en popularite.`;
    }
}