// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.

/**
 * Encrypted password functionality.
 *
 * @module core_form/encryptedpassword
 * @copyright 2019 The Open University
 * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

/**
 * Constructor for EncryptedPassword.
 *
 * @class core_form/encryptedpassword
 * @param {String} elementId The element to apply the encrypted password JS to
 */
export const EncryptedPassword = function(elementId) {
    const wrapper = document.querySelector('div[data-encryptedpasswordid="' + elementId + '"]');
    this.spanOrLink = wrapper.querySelector('span, a');
    this.input = wrapper.querySelector('input');
    this.editButtonOrLink = wrapper.querySelector('button[data-editbutton], a');
    this.cancelButton = wrapper.querySelector('button[data-cancelbutton]');

    // Edit button action.
    var editHandler = (e) => {
        e.stopImmediatePropagation();
        e.preventDefault();
        this.startEditing(true);
    };
    this.editButtonOrLink.addEventListener('click', editHandler);

    // When it's a link, do some magic to make the label work as well.
    if (this.editButtonOrLink.nodeName === 'A') {
        wrapper.parentElement.previousElementSibling.querySelector('label').addEventListener('click', editHandler);
    }

    // Cancel button action.
    this.cancelButton.addEventListener('click', (e) => {
        e.stopImmediatePropagation();
        e.preventDefault();
        this.cancelEditing();
    });

    // If the value is not set yet, start editing and remove the cancel option - so that
    // it saves something in the config table and doesn't keep repeat showing it as a new
    // admin setting...
    if (wrapper.dataset.novalue === 'y') {
        this.startEditing(false);
        this.cancelButton.style.display = 'none';
    }
};

/**
 * Starts editing.
 *
 * @param {Boolean} moveFocus If true, sets focus to the edit box
 */
EncryptedPassword.prototype.startEditing = function(moveFocus) {
    this.input.style.display = 'inline';
    this.input.disabled = false;
    this.spanOrLink.style.display = 'none';
    this.editButtonOrLink.style.display = 'none';
    this.cancelButton.style.display = 'inline';

    // Move the id around, which changes what happens when you click the label.
    const id = this.editButtonOrLink.id;
    this.editButtonOrLink.removeAttribute('id');
    this.input.id = id;

    if (moveFocus) {
        this.input.focus();
    }
};

/**
 * Cancels editing.
 */
EncryptedPassword.prototype.cancelEditing = function() {
    this.input.style.display = 'none';
    this.input.value = '';
    this.input.disabled = true;
    this.spanOrLink.style.display = 'inline';
    this.editButtonOrLink.style.display = 'inline';
    this.cancelButton.style.display = 'none';

    // Move the id around, which changes what happens when you click the label.
    const id = this.input.id;
    this.input.removeAttribute('id');
    this.editButtonOrLink.id = id;
};