// Get references to various DOM elements
const keyboard = document.getElementById('keyboard');
const output = document.getElementById('output');
const font_names = document.getElementById('font-name-tabs');
const outputContainer = document.getElementById('output-container');
// Define an array of colors for the keyboard keys
const keyColors = [
  "#00c3e6", "#00b500", "#9b0381", "#c2d2ed", "#fe2918", "#bc2f98", "#dddfd5", "#8b7b7c",
  "#fee849", "#8f908b", "#160602", "#433f8e", "#ca662d", "#8dc30d", "#b5eefb", "#f7c0d3",
  "#ffe9ac", "#bba6c5", "#fffdf5", "#fd2683", "#034a12", "#843807", "#fec79c", "#0098bf",
  "#ff5703", "#ff9d2a"
];

// const colorize = () =>
// {
//   // Apply colors to each key on the keyboard
//   const keys = document.querySelectorAll('.key');
//   for (let i = 0; i < keys.length; i++) {
//     keys[i].style.backgroundImage = `linear-gradient(to bottom, transparent 80%, ${keyColors[i]} 80%)`;
//   }
// }

const colorize = () => {
  // Apply colors to each key on the keyboard
  const keys = document.querySelectorAll('.key');
  for (let i = 0; i < keys.length; i++) {
    if (document.getElementById('Veranda').classList.contains('active')) {
      keys[i].style.backgroundImage = `linear-gradient(to bottom, transparent 80%, ${keyColors[i]} 80%)`;
    } else {
      keys[i].style.backgroundImage = 'none';
    }


    
  }
};
// Define available fonts and set the default font
const fonts = ['Veranda', 'Author', 'Bills_Symbols', 'SECRETCODE', 'Runes', 'Theraprism', 'Alchemic', 'Combined'];
let currentFont = fonts[0];

// Create font selection tabs dynamically based on the available fonts
for (const font of fonts) {
  const tab = document.createElement('button');
  tab.className = 'tab';
  tab.id = font;
  tab.textContent = font;
  if (font == "Veranda") {tab.textContent = "Color"; }
  // Update the current font and apply it to the keyboard when a tab is clicked
  tab.addEventListener('click', () => {
    currentFont = font;
    keyboard.style.fontFamily = font;
  });

  font_names.appendChild(tab);
}


// Set the initial active tab
document.getElementById('Veranda').className = 'tab active';

const tabs = document.querySelectorAll('.tab');

// Add click event listeners to each tab to manage the active state
tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // Remove the active class from all tabs
    tabs.forEach(t => t.classList.remove('active'));
 
    // Add the active class to the clicked tab
    tab.classList.add('active');
    colorize();
  });
});




for (const letter of 'abcdefghijklmnopqrstuvwxyz') {
  const key = document.createElement('div');
  key.className = 'key';
  key.textContent = letter.toUpperCase();

  key.addEventListener('click', () => {
    output.textContent += letter.toUpperCase();

    const keys = Array.from(document.querySelectorAll('.key'));
    const activeKeyColor = keyColors[keys.indexOf(key)];
    console.log(activeKeyColor);
    // outputContainer.innerHTML += `<span class="${currentFont}" style="background-image: linear-gradient(to bottom, transparent 90%, ${activeKeyColor} 90%)">${letter.toUpperCase()}</span>`;
    if (currentFont === 'Veranda') {
      outputContainer.innerHTML += `<span class="${currentFont}" style="background-image: linear-gradient(to bottom, transparent 90%, ${activeKeyColor} 90%);">${letter.toUpperCase()}</span>`;
    } else {
      outputContainer.innerHTML += `<span class="${currentFont}">${letter.toUpperCase()}</span>`;
    }
  });

  keyboard.appendChild(key);
}

// Create the delete button
const del = document.createElement('div');
del.className = "key";
del.id = "undo-button";
del.textContent = "delete";
keyboard.appendChild(del);

// Add an event listener to the delete button to remove the last character
const undoButton = document.querySelector('#undo-button');
undoButton.addEventListener('click', () => {
  output.textContent = output.textContent.slice(0, -1);
  outputContainer.removeChild(outputContainer.lastElementChild);
});

// Create the spacebar button
const space = document.createElement('div');
space.className = "key";
space.id = "spacebar";
space.textContent = "space";
keyboard.appendChild(space);

// Add an event listener to the spacebar to add a space in the output
document.getElementById("spacebar").addEventListener('click', () => {
  output.textContent += " ";
  outputContainer.innerHTML += `<span class="${currentFont}">  </span>`;
});

// Add an event listener to the clear output button to clear the output area
const clearOutputButton = document.getElementById('clear-output');
clearOutputButton.addEventListener('click', () => {
  document.getElementById('output').textContent = '';
  document.getElementById('output-container').textContent = '';
});

colorize();