const titleContainer = document.getElementById('title-container');
const colorContainer = document.getElementById('color-container');
const titleTextColor = document.getElementById('title-text');
const textColor = document.getElementById('text');
const hexCodeButton = document.getElementById('hex-code-button');
const rgbCodeButton = document.getElementById('rgb-code-button');

let hexAnimationInProgress = false;
let rgbAnimationInProgress = false;

document.addEventListener('DOMContentLoaded', () => {
  const savedColor = localStorage.getItem('latestColor');
  if (savedColor) {
    document.body.style.backgroundColor = savedColor;
    updateButtonStyle(savedColor);

    animateHexCode(rgbToHex(savedColor));

    if (!rgbAnimationInProgress) {
      animateRgbCode(savedColor);
      rgbCodeButton.textContent = '';
    }
  }
});

document.addEventListener('click', handleBackgroundClick);
document.addEventListener('keydown', handleKeyPress);
hexCodeButton.addEventListener('click', copyHexCode);
rgbCodeButton.addEventListener('click', copyRgbCode);

function handleBackgroundClick(event) {
  if (event.target === document.body || event.target === colorContainer || event.target === titleContainer) {
    changeBackgroundColor();
  }
}

function changeBackgroundColor() {
  const randomColor = getRandomColor();
  const hexCode = rgbToHex(randomColor);

  document.body.style.backgroundColor = randomColor;
  updateButtonStyle(randomColor);

  animateHexCode(hexCode);

  if (!rgbAnimationInProgress) {
    animateRgbCode(randomColor);
    rgbCodeButton.textContent = '';
  }

  localStorage.setItem('latestColor', randomColor);
}

function handleKeyPress(event) {
  if (event.code === 'Space') {
    if (
      event.target === hexCodeButton ||
      event.target === rgbCodeButton ||
      event.target.closest('#hexCodeButton') ||
      event.target.closest('#rgbCodeButton')
    ) {
      event.preventDefault();
      changeBackgroundColor();
    } else {
      changeBackgroundColor();
      event.preventDefault();
    }
  }
}

function getRandomColor() {
  const red = Math.floor(Math.random() * 256);
  const green = Math.floor(Math.random() * 256);
  const blue = Math.floor(Math.random() * 256);
  return `rgb(${red}, ${green}, ${blue})`;
}

function rgbToHex(rgbColor) {
  const rgbArray = rgbColor.match(/\d+/g);
  const red = parseInt(rgbArray[0]);
  const green = parseInt(rgbArray[1]);
  const blue = parseInt(rgbArray[2]);
  const hexCode = ((red << 16) | (green << 8) | blue).toString(16).padStart(6, '0');
  return `#${hexCode}`;
}

function animateHexCode(hexCode) {
  if (hexAnimationInProgress) {
    return;
  }

  hexAnimationInProgress = true;
  hexCodeButton.textContent = '';

  const characters = hexCode.split('');
  let index = 0;

  const intervalId = setInterval(() => {
    if (index === characters.length) {
      clearInterval(intervalId);
      hexAnimationInProgress = false;
    } else {
      hexCodeButton.textContent += characters[index];
      index++;
    }
  }, 50);
}

function animateRgbCode(rgbCode) {
  if (rgbAnimationInProgress) {
    return;
  }

  rgbCodeButton.textContent = '';
  rgbAnimationInProgress = true;

  const rgbArray = rgbCode.match(/\d+/g);
  const rgbValue = `rgb(${rgbArray[0]}, ${rgbArray[1]}, ${rgbArray[2]})`;

  const characters = rgbValue.split('');
  let index = 0;

  const intervalId = setInterval(() => {
    if (index === characters.length) {
      clearInterval(intervalId);
      rgbAnimationInProgress = false;
    } else {
      rgbCodeButton.textContent += characters[index];
      index++;
    }
  }, 50);
}

function updateButtonStyle(color) {
  const isDarkBackground = isColorDark(color);

  if (isDarkBackground) {
    hexCodeButton.setAttribute('data-text-color', 'light');
  } else {
    hexCodeButton.setAttribute('data-text-color', 'dark');
  }

  if (isDarkBackground) {
    rgbCodeButton.setAttribute('data-text-color', 'light');
  } else {
    rgbCodeButton.setAttribute('data-text-color', 'dark');
  }

  if (isDarkBackground) {
    titleTextColor.setAttribute('data-text-color', 'light');
  } else {
    titleTextColor.setAttribute('data-text-color', 'dark');
  }

  if (isDarkBackground) {
    textColor.setAttribute('data-text-color', 'light');
  } else {
    textColor.setAttribute('data-text-color', 'dark');
  }
}

function isColorDark(color) {
  const rgbArray = color.match(/\d+/g);
  const [red, green, blue] = rgbArray.map(Number);
  const brightness = (red * 299 + green * 587 + blue * 114) / 1000;
  return brightness < 128;
}

function copyHexCode() {
  const hexCode = document.createElement('textarea');
  hexCode.value = hexCodeButton.textContent;
  document.body.appendChild(hexCode);
  hexCode.select();
  document.execCommand('copy');
  document.body.removeChild(hexCode);
}

function copyRgbCode() {
  const rgbCode = document.createElement('textarea');
  rgbCode.value = rgbCodeButton.textContent;
  document.body.appendChild(rgbCode);
  rgbCode.select();
  document.execCommand('copy');
  document.body.removeChild(rgbCode);
}