export const applyIOMarketTheme = () => {
  document.documentElement.style.setProperty('--header-background-color', '#7e7e7e');
  document.documentElement.style.setProperty('--header-text-color', '#ffffff');
  document.documentElement.style.setProperty('--background-color', '#8B9635');
  document.documentElement.style.setProperty('--text-color', '#474D22');
  document.documentElement.style.setProperty('--input-background-color', '#ffffff');
  document.documentElement.style.setProperty('--input-button-color', '#8B9635');
  document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b');
  document.documentElement.style.setProperty('--user-message-background-color', '#8B9635');
  document.documentElement.style.setProperty('--user-message-text-color', '#000');
  document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB');
  document.documentElement.style.setProperty('--ai-message-text-color', '#000');
  document.documentElement.style.setProperty('--button-background-color', '#8B9635');
  document.documentElement.style.setProperty('--button-hover-background-color', '#6b7c2b');
  document.documentElement.style.setProperty('--models-background-color', '#ffffff');
  document.documentElement.style.setProperty('--history-background-color', '#f9f9f9');
  document.documentElement.style.setProperty('--left-panel-background-color', '#79832e');
  document.documentElement.style.setProperty('--conversation-background-color', '#79832e');
  document.documentElement.style.setProperty('--doc-background-color', '#ffffff');
  document.documentElement.style.setProperty('--close-button-color', 'red');
  document.documentElement.style.setProperty('--close-button-hover-color', '#9e0101');
  document.documentElement.style.setProperty('--apply-button-color', '#8B9635');
  document.documentElement.style.setProperty('--apply-button-hover-color', '#6b7c2b');
  document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e');
  document.documentElement.style.setProperty('--overlay-text-color', 'white');
  document.documentElement.style.setProperty('--faq-background-color', '#474D22');
  document.documentElement.style.setProperty('--faq-heading-color', '#8B9635');
  document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe');
  document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22');
  document.documentElement.style.setProperty('--faq-item-text-color', '#333');
  document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0');
  document.documentElement.style.setProperty('--popup-background-color', '#8B9635');
  document.documentElement.style.setProperty('--pop-up-text', '#000');
  document.documentElement.style.setProperty('--input-border-color', '#8B9635');
  document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'");
  document.documentElement.style.setProperty('--font-size', '16px'); 
};

export const applyWhiteTheme = () => {
  document.documentElement.style.setProperty('--header-background-color', '#f0f0f0'); // Lighter header background
  document.documentElement.style.setProperty('--header-text-color', '#333'); // Dark text for contrast
  document.documentElement.style.setProperty('--background-color', '#ffffff'); // White background
  document.documentElement.style.setProperty('--text-color', '#000'); // Dark text color
  document.documentElement.style.setProperty('--input-background-color', '#f9f9f9'); // Light input background
  document.documentElement.style.setProperty('--input-button-color', '#cccccc'); // Light button color
  document.documentElement.style.setProperty('--input-button-hover-color', '#b3b3b3'); // Slightly darker on hover
  document.documentElement.style.setProperty('--user-message-background-color', '#e0e0e0'); // Light grey for user messages
  document.documentElement.style.setProperty('--user-message-text-color', '#000'); // Dark text for contrast
  document.documentElement.style.setProperty('--ai-message-background-color', '#f7f7f7'); // Very light background for AI messages
  document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // Dark text for readability
  document.documentElement.style.setProperty('--button-background-color', '#cccccc'); // Light button background
  document.documentElement.style.setProperty('--button-hover-background-color', '#b3b3b3'); // Darker on hover
  document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // White background for models section
  document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // Light background for history section
  document.documentElement.style.setProperty('--left-panel-background-color', '#e0e0e0'); // Light grey for the left panel
  document.documentElement.style.setProperty('--conversation-background-color', '#e0e0e0'); // Light grey conversation background
  document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // White document background
  document.documentElement.style.setProperty('--close-button-color', '#ff4d4d'); // Soft red close button
  document.documentElement.style.setProperty('--close-button-hover-color', '#ff1a1a'); // Brighter red on hover
  document.documentElement.style.setProperty('--apply-button-color', '#cccccc'); // Light button color for apply
  document.documentElement.style.setProperty('--apply-button-hover-color', '#b3b3b3'); // Darker hover color for apply button
  document.documentElement.style.setProperty('--burger-menu-background-color', '#e0e0e0'); // Light grey burger menu background
  document.documentElement.style.setProperty('--overlay-text-color', '#333'); // Dark overlay text
  document.documentElement.style.setProperty('--faq-background-color', '#f0f0f0'); // Light FAQ section background
  document.documentElement.style.setProperty('--faq-heading-color', '#333'); // Dark heading for contrast
  document.documentElement.style.setProperty('--faq-item-background-color', '#ffffff'); // White background for FAQ items
  document.documentElement.style.setProperty('--faq-item-heading-color', '#000'); // Dark headings for FAQ items
  document.documentElement.style.setProperty('--faq-item-text-color', '#666'); // Medium grey text color for readability
  document.documentElement.style.setProperty('--faq-item-hover-background-color', '#eaeaea'); // Slight hover effect for FAQ items
  document.documentElement.style.setProperty('--popup-background-color', '#ffffff'); // White popup background
  document.documentElement.style.setProperty('--pop-up-text', '#000'); // Dark text for pop-ups
  document.documentElement.style.setProperty('--input-border-color', '#cccccc'); // Light input border color
  document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Same font family
  document.documentElement.style.setProperty('--font-size', '16px'); // Same font size
};

export const applyBlackTheme = () => {
  document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background
  document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // White text for header
  document.documentElement.style.setProperty('--background-color', '#2c2c2c'); // Dark main background
  document.documentElement.style.setProperty('--text-color', '#f0f0f0'); // Light text color
  document.documentElement.style.setProperty('--input-background-color', '#3d3d3d'); // Dark input background
  document.documentElement.style.setProperty('--input-button-color', '#4caf50'); // Button color
  document.documentElement.style.setProperty('--input-button-hover-color', '#66bb6a'); // Button hover color
  document.documentElement.style.setProperty('--user-message-background-color', '#4caf50'); // User message background
  document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // User message text color
  document.documentElement.style.setProperty('--ai-message-background-color', '#424242'); // AI message background
  document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // AI message text color
  document.documentElement.style.setProperty('--button-background-color', '#4caf50'); // Button background color
  document.documentElement.style.setProperty('--button-hover-background-color', '#66bb6a'); // Button hover color
  document.documentElement.style.setProperty('--models-background-color', '#3d3d3d'); // Dark background for models section
  document.documentElement.style.setProperty('--history-background-color', '#333333'); // Dark history background
  document.documentElement.style.setProperty('--left-panel-background-color', '#1a1a1a'); // Dark left panel background
  document.documentElement.style.setProperty('--conversation-background-color', '#1a1a1a'); // Dark conversation container
  document.documentElement.style.setProperty('--doc-background-color', '#3d3d3d'); // Dark document background
  document.documentElement.style.setProperty('--close-button-color', '#f44336'); // Red close button color
  document.documentElement.style.setProperty('--close-button-hover-color', '#d32f2f'); // Darker red hover color
  document.documentElement.style.setProperty('--apply-button-color', '#4caf50'); // Apply button color
  document.documentElement.style.setProperty('--apply-button-hover-color', '#66bb6a'); // Apply button hover color
  document.documentElement.style.setProperty('--burger-menu-background-color', '#1a1a1a'); // Dark burger menu background
  document.documentElement.style.setProperty('--overlay-text-color', '#ffffff'); // White overlay text
  document.documentElement.style.setProperty('--faq-background-color', '#333333'); // Dark background for FAQ section
  document.documentElement.style.setProperty('--faq-heading-color', '#4caf50'); // FAQ heading color
  document.documentElement.style.setProperty('--faq-item-background-color', '#4c4c4c'); // Dark FAQ item background
  document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // White FAQ item heading
  document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // Light text for FAQ items
  document.documentElement.style.setProperty('--faq-item-hover-background-color', '#555555'); // Hover background for FAQ items
  document.documentElement.style.setProperty('--popup-background-color', '#4caf50'); // Dark popup background
  document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // White pop-up text
  document.documentElement.style.setProperty('--input-border-color', '#4caf50'); // Input border color
  document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
  document.documentElement.style.setProperty('--font-size', '16px'); // Font size
  
};

export const applyCustomTheme = () => {
  const themeVariables = {
      backgroundColor: localStorage.getItem('backgroundColor'),
      headerBackground: localStorage.getItem('headerBackground'),
      textColor: localStorage.getItem('textColor'),
      inputBackgroundColor: localStorage.getItem('inputBackgroundColor'),
      inputButtonColor: localStorage.getItem('inputButtonColor'),
      inputButtonHoverColor: localStorage.getItem('inputButtonHoverColor'),
      userMessageBackgroundColor: localStorage.getItem('userMessageBackgroundColor'),
      userMessageTextColor: localStorage.getItem('userMessageTextColor'),
      aiMessageBackgroundColor: localStorage.getItem('aiMessageBackgroundColor'),
      aiMessageTextColor: localStorage.getItem('aiMessageTextColor'),
      buttonBackgroundColor: localStorage.getItem('buttonBackgroundColor'),
      buttonHoverBackgroundColor: localStorage.getItem('buttonHoverBackgroundColor'),
      modelsBackgroundColor: localStorage.getItem('modelsBackgroundColor'),
      historyBackgroundColor: localStorage.getItem('historyBackgroundColor'),
      leftPanelBackgroundColor: localStorage.getItem('leftPanelBackgroundColor'),
      conversationBackgroundColor: localStorage.getItem('conversationBackgroundColor'),
      faqBackgroundColor: localStorage.getItem('faqBackgroundColor'),
      faqHeadingColor: localStorage.getItem('faqHeadingColor'),
      faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'),
      faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'),
      faqItemTextColor: localStorage.getItem('faqItemTextColor'),
      faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'),
      inputBorderColor: localStorage.getItem('inputBorderColor'),
      fontFamily: localStorage.getItem('fontFamily'),
      fontSize: localStorage.getItem('fontSize'),
      burgerMenu: localStorage.getItem('burgerMenu'),
  };

  document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212');
  document.documentElement.style.setProperty('--header-background-color', themeVariables.headerBackground || '#7e7e7e');
  document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0');
  document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e');
  document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c');
  document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a');
  document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000');
  document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff');
  document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020');
  document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff');
  document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c');
  document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a');
  document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e');
  document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a');
  document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e');
  document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c');
  document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c');
  document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff');
  document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c');
  document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff');
  document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0');
  document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a');
  document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c');
  document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'");
  document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px');
  document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e');
};

// This is the new function that calls the appropriate theme application
export const applyTheme = (theme: string) => {
  switch (theme) {
      case 'IOMARKET':
        applyIOMarketTheme();
        break;
      case 'WHITE':
        applyWhiteTheme();
        break;
      case 'BLACK':
        applyBlackTheme();
        break;
      case 'CUSTOM':
        applyCustomTheme();
        break;
      default:
        applyIOMarketTheme();
        break;
  }
};