/******************************************/
/******************************************/
/**************TYPETESTER******************/
/******************************************/
/******************************************/

// Variables selecting different input/select fields with their name attributes
const fontSizeSlider = document.querySelector('input[name="fontsize"]');
const lineHeightSlider = document.querySelector('input[name="lineheight"]');
const letterSpacingSlider = document.querySelector('input[name="letterspacing"]');
const variableaxiswghtSlider = document.querySelector('input[name="variableaxiswght"]');
const variableaxis2Slider = document.querySelector('input[name="variableaxis2"]');
const allvariableSliders = document.querySelectorAll(".variableslider");
const fontweigthSelect = document.querySelector('select[name="fontweight"]');
const textalignmentSelect = document.getElementsByName("textalign");

// get computed Stlyes of elements and load them into the variable defaultVariableFontValueToSelect
const root = document.documentElement;
const computedRootStyles = getComputedStyle(root);

// Variable selecting TT textarea to output data
const outputToTextarea = document.querySelector("div.output");

// Variable getting computed CSS Styles from output Area
const computedOutputAreaStyles = getComputedStyle(outputToTextarea);

// Variable to store default Values from Variable Font Settings
let defaultVariableFontValueToSelect;

// Move cursor focus to end of textarea
window.onload = function(){
    function repositionCursor() {
        const selection = window.getSelection();
        const range = document.createRange();
        selection.removeAllRanges();
        range.selectNodeContents(outputToTextarea);
        range.collapse(false);
        selection.addRange(range);
        outputToTextarea.focus();
    }

    function checkingVariableFontStatus(){
        // Set fontVariationSettings and give them to outputToTextarea
        if (allvariableSliders && isFontVariableOptionCMS == true) {
            //Checking if only one or two variable axis are contained in font and setting appropriate css 
            if (variableAXIS2Name){
                outputToTextarea.style.fontVariationSettings = `"wght" var(--variableaxiswght), "${variableFontAxis2NameFromCMS}" var(--variableaxis2)`;
            } else {
                outputToTextarea.style.fontVariationSettings = `"wght" var(--variableaxiswght)`;
            }
        } 
    }

    //repositionCursor();
    checkingVariableFontStatus();



// if Variable Sliders are present and the font is a variable font
if (allvariableSliders && isFontVariableOptionCMS == true) {

    // Get the value of the CSS Variables
    const variableFontWGHTAxisValue = computedRootStyles.getPropertyValue(`--variableaxiswght`);
    const variableFontAxis2Value = computedRootStyles.getPropertyValue(`--variableaxis2`);
    defaultVariableFontValueToSelect = variableFontWGHTAxisValue;
} else {
    // get computed Stlyes of elements and load them into the variable defaultVariableFontValueToSelect 
    const fontWeightVariableValue = computedOutputAreaStyles.getPropertyValue('font-weight');
    defaultVariableFontValueToSelect = fontWeightVariableValue;
}

// This function loads the default values from the output div and sets the corresponding Sliders Value to this
// Important in Mobile Browsers where CSS Variable is changed
function loadDefaultValueAndOutputToSlider(CssPropertyName, outputToThisSlider){
    let defaultCSSVariableValue = computedOutputAreaStyles.getPropertyValue(CssPropertyName);
    if(CssPropertyName === 'font-size'){
        let rootFontSizePx = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
        defaultCSSVariableValue = parseFloat(defaultCSSVariableValue);
        defaultCSSVariableValue = defaultCSSVariableValue / rootFontSizePx
        outputToThisSlider.value = defaultCSSVariableValue;
        // console.log(CssPropertyName + ' ' + defaultCSSVariableValue);

    } else {
        let currentDefaltValueFontSize = computedOutputAreaStyles.getPropertyValue('font-size');
        currentDefaltValueFontSize = parseFloat(currentDefaltValueFontSize);

        defaultCSSVariableValue = parseFloat(defaultCSSVariableValue);
        defaultCSSVariableValue = defaultCSSVariableValue / currentDefaltValueFontSize;
        outputToThisSlider.value = defaultCSSVariableValue;
        // console.log(CssPropertyName + ' ' + defaultCSSVariableValue)
    }
}

loadDefaultValueAndOutputToSlider('font-size', fontSizeSlider);
loadDefaultValueAndOutputToSlider('line-height', lineHeightSlider);
loadDefaultValueAndOutputToSlider('letter-spacing', letterSpacingSlider);

// Function to display default value of Sliders in Span on page load
function setDefaultValueToSliderTextSpan(CssPropertyName, getOutputSpan){


function pxToPt(pxValue, dpi = 96) {
              // There are approximately 72 points in an inch
              // 1 point = 1/72 inch
              // 1 inch = 2.54 cm
              // 1 cm = 2.54 / dpi inches
              const inches = pxValue / dpi;
              const points = inches * 72;
              return points;
            }




    let getValueFromThisCSSProperty = computedOutputAreaStyles.getPropertyValue(CssPropertyName);
    getValueFromThisCSSProperty = parseFloat(getValueFromThisCSSProperty);
    console.log(getValueFromThisCSSProperty);
    const outputToThisSpan = document.getElementById(getOutputSpan);
    outputToThisSpan.textContent = Math.round(pxToPt(getValueFromThisCSSProperty)) + '\u2009' + 'pt';
}

setDefaultValueToSliderTextSpan('font-size', 'spanFontSize');
setDefaultValueToSliderTextSpan('line-height', 'spanLineHeight');
setDefaultValueToSliderTextSpan('letter-spacing', 'spanLetterSpacing');
setDefaultValueToSliderTextSpan('font-size', 'quittung-font-size');




// Only start this function if the variable has any content in it
if(schriftschnitteNamesFromCMS && schriftschnitteValuesStringFromCMS) {
    // function to seperate string (Muster,Muster) into an array
    function separateString(){
        // Split the array at every comma
        schriftschnitteSeperatedArray = schriftschnitteNamesFromCMS.split(',');
        schriftschnitteValuesSeperatedArray = schriftschnitteValuesStringFromCMS.split(',');
        //console.log(schriftschnitteSeperatedArray)
        //console.log(schriftschnitteValuesSeperatedArray)
    }
    separateString();

    // Fuction to load Schriftschnitte into the select element in the TT
    function loadSchriftschnitteIntoSelect() {
        // run this function for every element in the array
        for (let i = 0; i < schriftschnitteSeperatedArray.length; i++) {
            const newOptionElement = document.createElement("option");
            newOptionElement.value = schriftschnitteValuesSeperatedArray[i];
            newOptionElement.innerHTML = schriftschnitteSeperatedArray[i];
            document.getElementById('selectElement').appendChild(newOptionElement);
            // console.log(schriftschnitteValuesSeperatedArray[i]);
            // Check if this option's value matches the valueToSelect
            if (schriftschnitteValuesSeperatedArray[i] == defaultVariableFontValueToSelect) {
                newOptionElement.selected = true;
                // console.log(schriftschnitteValuesSeperatedArray[i]);
            }
        }
    }
    loadSchriftschnitteIntoSelect();
}


    // Give the Text Align Button corresponding to the Default Value from the CMS the pressed Class
    const buttonTALeft = document.getElementById('textalign1');
    const buttonTACenter = document.getElementById('textalign2');
    const buttonTARight = document.getElementById('textalign3');

    buttonTALeft.classList.remove("pressedButtonTA");
    buttonTACenter.classList.remove("pressedButtonTA");
    buttonTARight.classList.remove("pressedButtonTA");

    // Set the 'pressedButtonTA' class based on the value from the CMS
    if (defaultTAValueFromCMS === "left") {
        buttonTALeft.classList.add("pressedButtonTA");
    } else if (defaultTAValueFromCMS === "center") {
        buttonTACenter.classList.add("pressedButtonTA");
    } else if (defaultTAValueFromCMS === "right") {
        buttonTARight.classList.add("pressedButtonTA");
    }


    // Change Font Size Slider Range on smaller Screens

    // Function to update the min and max values of the slider based on window size
    function updateSliderMinMax() {
      // Get the current window width
      const windowWidth = window.innerWidth;

      // Set the min and max values based on the window width
      if (windowWidth < 992) {
        fontSizeSlider.min = 0.5; // Set the minimum value when window is smaller than 800px
        fontSizeSlider.max = 8; // Set the maximum value when window is smaller than 800px
      }
    }

    // Add an event listener to the window's resize event
    window.addEventListener("resize", updateSliderMinMax);

    // Initial call to set the initial min and max values based on the window size
    updateSliderMinMax();

}



// if statements are to prevent errors when the components are hidden, the functions don't run if the const == null

// Slider Function to change Formatting of Text inside .output DIV accepting the following parameters
// sliderId = ID of the Slider function is attached to with oninput
// outputElement = class of output element with . infront
// cssVariable = name of CSS Variable that will be changed with -- infront
// unit = unit of mesurement for Property
// In use for the following Sliders: Font Size, Line Height, Letter Spacing
function changeTextFormattingOnSliderChange(sliderId, outputElement, cssVariable, unit) {
    const thisSlider = document.getElementById(sliderId);
    const getOutputElement = document.querySelector(outputElement);
    const getCurrentScrollYPos = window.scrollY;
    getOutputElement.style.setProperty(`${cssVariable}`, thisSlider.value + unit);
    window.scrollTo(0, getCurrentScrollYPos);
}

// toggleButton function is executed when button is pressed
function toggleButton(buttonId, pressedStateClass, cssFromCms) {
    const outputToggleButtonClass = document.querySelector("div.output");
    const toggleButtonPressed = document.getElementById(buttonId);

    // Get the string containing the CSS code from the CMS and convert the Quotes "" back to original form
    const CssFromCmsDecoded = new DOMParser().parseFromString(cssFromCms, "text/html").body.textContent;
    //console.log(CssFromCmsDecoded);

    // Splitting the string into property and value parts
    // splitting the string by the :
    const CssfromCmsParts = CssFromCmsDecoded.split(':');
    const CssfromCmsProperty = CssfromCmsParts[0].trim();
    const CssfromCmsValue = CssfromCmsParts[1].trim();

    // console.log(CssfromCmsProperty);
    // console.log(CssfromCmsValue);

    // Check if the property is applied and toggle accordingly
    const hasPropertyApplied = outputToTextarea.style.getPropertyValue(CssfromCmsProperty);

    // console.log(hasPropertyApplied)

    if (hasPropertyApplied) {
        outputToTextarea.style.removeProperty(CssfromCmsProperty);
    } else {
        outputToTextarea.style.setProperty(CssfromCmsProperty, CssfromCmsValue);
    }

    // Toggle the pressed state class for the button
    toggleButtonPressed.classList.toggle(pressedStateClass);
}

// Function to Change Textalignment with Buttons with following Parameters
// taButtonID = ID of Button this Function is attached to with onclick
// taButtonsClass = Class all TA Buttons have
// taButtonsToggleClass = Toggled ON Class with styles
// outputToThisElement = output Element for TA Formatting
// valueTA = Value of Button (left, center, right)
function pressingTextAlignmentButtons(taButtonID, taButtonsClass, taButtonsToggleClass, outputToThisElement, valueTA) {
    // Defining Variables, by getting Button by ID and selecting all Elements with the following class
    const currentPressedTAButton = document.getElementById(taButtonID);
    const allOtherTAButtons = document.querySelectorAll(taButtonsClass);
    // For Each Element in the allOtherTAButtons variable excecute this function
    allOtherTAButtons.forEach(button => {
        // remove the Toggle Class from them
        button.classList.remove(taButtonsToggleClass);
    });
    // Add the Toggle Class to the current Button being pressed
    currentPressedTAButton.classList.add(taButtonsToggleClass);
    // select the output Element
    const outputToThisTAButton = document.querySelector(outputToThisElement);
    //Style The output Element accordingly
    outputToThisTAButton.style.setProperty(`--textalign`, valueTA);
}

// VARIABLE SLIDERS
// Function to set Values for the two Axis & output them to the .output class
if (variableAXIS2Name) {
    function updateVariableFontSettings(wghtValue, axis2Value) {
        // Update the font variation settings based on the slider values
        const variableFontSettings = `"wght" ${wghtValue}, "${variableFontAxis2NameFromCMS}" ${axis2Value}`;
        outputToTextarea.style.fontVariationSettings = variableFontSettings;
    }
} else {
    function updateVariableFontSettings(wghtValue) {
        // Update the font variation settings based on the slider values
        const variableFontSettings = `"wght" ${wghtValue}`;
        outputToTextarea.style.fontVariationSettings = variableFontSettings;
    }
}



// Event Listener when WGHT Axis input sldier is changed
variableaxiswghtSlider.addEventListener('input', function() {
    // Get Values from Sliders and run the function
    const wghtValue = variableaxiswghtSlider.value;
    const axis2Value = variableaxis2Slider.value;
    updateVariableFontSettings(wghtValue, axis2Value);
});
// Event Listener when Axis2 input sldier is changed
variableaxis2Slider.addEventListener('input', function() {
    // Get Values from Sliders and run the function
    const wghtValue = variableaxiswghtSlider.value;
    const axis2Value = variableaxis2Slider.value;
    updateVariableFontSettings(wghtValue, axis2Value);
});


// CHANGING SELECT Element
document.addEventListener("DOMContentLoaded", function () {
    function handleFontWeightChange(selectElement, outputElement) {
        const currentSelectElement = document.getElementById(selectElement);
        const outputToThisDivElement = document.querySelector(outputElement);
        currentSelectElement.addEventListener("input", function () {
            //console.log('Select is being pressed')
            // Check if value is set; if so, delete it
            // Check if the computed style of the element has a specific property
            if (outputToThisDivElement.style.fontVariationSettings) {
                // Remove the "font-variation-settings" property from the element's inline style
                outputToThisDivElement.style.removeProperty('font-variation-settings');
                //console.log('FVS property removed.');
            } else {
                //console.log('FVS property not set.');
            }
            outputToThisDivElement.style.setProperty(`--fontweight`, this.value);

            // Set Variable WGHT Slider to the same value
            if(allvariableSliders && isFontVariableOptionCMS == true){
                variableaxiswghtSlider.value = this.value;
            }
        });
    }
    handleFontWeightChange('selectElement', '.output');

});

// Function to dynamically change px Values in Sliders when the sliders are changed
function outputSliderValuesToSpan(sliderVariable, getOutputSpan) {
    sliderVariable.addEventListener("input", function () {
        const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
        let currentSliderValue = sliderVariable.value;
        if(sliderVariable === fontSizeSlider){



            function pxToPt(pxValue, dpi = 96) {
              // There are approximately 72 points in an inch
              // 1 point = 1/72 inch
              // 1 inch = 2.54 cm
              // 1 cm = 2.54 / dpi inches
              const inches = pxValue / dpi;
              const points = inches * 72;
              return points;
            }




            currentSliderValue = currentSliderValue * rootFontSize;
            const outputToThisSpan = document.getElementById(getOutputSpan);

            outputToThisSpan.textContent = Math.round(pxToPt(currentSliderValue)) + '\u2009' + 'pt';
        } else {



function pxToPt(pxValue, dpi = 96) {
              // There are approximately 72 points in an inch
              // 1 point = 1/72 inch
              // 1 inch = 2.54 cm
              // 1 cm = 2.54 / dpi inches
              const inches = pxValue / dpi;
              const points = inches * 72;
              return points;
            }





            currentSliderValue = currentSliderValue * (fontSizeSlider.value * rootFontSize);
            const outputToThisSpan = document.getElementById(getOutputSpan);
            outputToThisSpan.textContent = Math.round(pxToPt(currentSliderValue)) + '\u2009' + 'pt';
        }

    });

}

outputSliderValuesToSpan(fontSizeSlider, 'spanFontSize');
outputSliderValuesToSpan(lineHeightSlider, 'spanLineHeight');
outputSliderValuesToSpan(letterSpacingSlider, 'spanLetterSpacing');
outputSliderValuesToSpan(fontSizeSlider, 'quittung-font-size');





document.addEventListener("DOMContentLoaded", function() {
    // Get references to the button and the output element
    var toggleButtonVA = document.getElementById("toggleButtonVA");
    var outputElementforVA = document.querySelector("div.output");

    // Add a click event listener to the button
    toggleButtonVA.addEventListener("click", function() {
        // Toggle the "vertical-text" class on the output element
        outputElementforVA.classList.toggle("vertical-text");
        toggleButtonVA.classList.toggle("toggle-button-pressed-state");
    });
});