<?php
// 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/>.

/**
 * Dash - Form element for range input.
 *
 * @package   block_dash
 * @copyright  2019 bdecent gmbh <https://bdecent.de>
 * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

defined('MOODLE_INTERNAL') || die();

require_once('HTML/QuickForm/input.php');
require_once($CFG->dirroot.'/lib/form/templatable_form_element.php');

/**
 * Form element for range input.
 *
 * @package   block_dash
 * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */
class moodlequickform_dashrange extends MoodleQuickForm_text implements templatable {
    use templatable_form_element {
        export_for_template as export_for_template_base;
    }

    /**
     * Constructor.
     *
     * @param string $elementname (optional) Name of the text field.
     * @param string $elementlabel (optional) Text field label.
     * @param string $attributes (optional) Either a typical HTML attribute string or an associative array.
     */
    public function __construct($elementname=null, $elementlabel=null, $attributes=null) {
        parent::__construct($elementname, $elementlabel, $attributes);
        // Add a CSS class for styling the color picker.
        $class = $this->getAttribute('class');
        if (empty($class)) {
            $class = '';
        }
        $this->updateAttributes(['class' => $class.' block_dash-form-range-input ']);
    }

    /**
     * Export for template.
     *
     * @param renderer_base $output
     * @return array|stdClass
     */
    public function export_for_template(renderer_base $output) {
        global $PAGE;

        // Compose template context for the mform element.
        $context = $this->export_for_template_base($output);

        // Create range input.
        $rangeinput = \html_writer::tag('input', null,
            ['type' => 'range', 'name' => 'graderange', 'id' => $this->_attributes['name']]);

        // Get ID of the element.
        $element = $this->getAttribute('id');
        $input  = $this->_attributes['name'];

        // Add JS to append the color picker div before the element and initiate the color picker utility method.
        $PAGE->requires->js_amd_inline("
            var $element = document.getElementById('$element');
            var rangeDiv = document.createElement('div');
            rangeDiv.classList.add('admin_range', 'clearfix');
            rangeDiv.innerHTML = '$rangeinput'; // Add loading icon.
            $element.parentNode.prepend(rangeDiv);

            const $input = document.getElementById('$input');
            $input.value = $element.value;
            $element.setAttribute('value', $input.value);
            $input.addEventListener('input', (event) => {
                $element.textContent = event.target.value;
                $element.setAttribute('value', event.target.value);
            });

        ");

        return $context;
    }
}
