import { Controller } from "@hotwired/stimulus"
import { showToast } from "../services/toast";

export default class FirstRunController extends Controller {
    static targets = ['pages'];

    connect() {
        this.pagesTargets.forEach((x) => x.classList.add('d-none'));
        this.pagesTargets[0].classList.remove('d-none');
        this.element.querySelector('input[name="username"]').focus();
    }

    nextPage(ev) {
        ev.preventDefault();

        const currentIndex = this.pagesTargets.findIndex(x => !x.classList.contains('d-none'));
        if (currentIndex === -1) {
            return;
        }
        if (!this._validate(currentIndex)) {
            return;
        }

        let nextPage = currentIndex + 1;
        if (nextPage >= this.pagesTargets.length) {
            this.element.querySelector('form').submit();
            return;
        }

        this.pagesTargets[currentIndex].classList.add('d-none');
        this.pagesTargets[nextPage].classList.remove('d-none');

        if (nextPage === 1) {
            this.element.querySelector('input[name="siteName"]').focus();
        }
    }

    _validate(pageNumber) {
        let newUsername = this.element.querySelector('input[name="username"]');
        let newPassword1 = this.element.querySelector('input[name="password1"]');
        let newPassword2 = this.element.querySelector('input[name="password2"]');

        if (newUsername.value === '') {
            alert('Please enter a username');
            newUsername.focus();
            return false;
        }
        if (!newUsername.value.match(/^[a-zA-Z0-9_-]+$/)) {
            alert('Please enter a username with letters, numbers, underscores, and dashes only');
            newUsername.focus();
            newUsername.select();
            return false;
        }
        if (newPassword1.value === '') {
            alert('Please enter a password');
            newPassword1.focus();
            return false;
        }
        if (newPassword2.value !== newPassword1.value) {
            alert('Passwords do not match');
            newPassword2.focus();
            return false;
        }
        return true;
    }
}