import './Footer.scss'
import { Link } from 'react-router-dom'
import { t } from '$themelocalization'
import { Slot } from '$core-components'
import { getVariableValue } from '$ustoreinternal/services/cssVariables'

/**
 * Helper function to determine if a URL is external
 */
const isExternalLink = (url) => {
  return url && url.length > 0 && url.substring(0, 4).toLowerCase() === 'http';
};

/**
 * Renders a footer link or text based on the provided link URL
 */
const renderFooterLink = (link, text, id, className) => {
  if (!link || link.length === 0) {
    return <div className={className}>{text}</div>;
  }

  if (isExternalLink(link)) {
    return (
      <div className={className}>
        <a id={id} href={link}>{text}</a>
      </div>
    );
  }

  const handleClick = () => {
    // Use requestAnimationFrame to ensure scroll happens after navigation
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        window.scrollTo(0, 0);
      });
    });
  };

  return (
    <div className={className}>
      <Link id={id} to={link} onClick={handleClick}>{text}</Link>
    </div>
  );
};

const layout = getVariableValue('--cust-footer-layout', 'FORM');

/**
 * Renders the footer logo with optional link wrapper
 */
const renderFooterLogo = (logoSrc, logoLink, altText) => {
  const logoImage = <img src={logoSrc} className="footerLogo" alt={altText} />;

  if (!logoLink || logoLink.length === 0) {
    return logoImage;
  }

  if (isExternalLink(logoLink)) {
    return <a id="footer-logo-link" href={logoLink}>{logoImage}</a>;
  }

  const handleClick = () => {
    // Use requestAnimationFrame to ensure scroll happens after navigation
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        window.scrollTo(0, 0);
      });
    });
  };

  return <Link id="footer-logo-link" to={logoLink} onClick={handleClick}>{logoImage}</Link>;
};

/**
 * This component represents the footer in the store
 */
const Footer = () => {
if (layout.toLowerCase() == 'widget')
{
	  return (
		<div className="footer">
		  <Slot name="footer" />
		</div>
	  )
}
else
{	
 
  const footerLogo = getVariableValue('--cust-footer-logo', require(`$assets/images/xmpie-logo.png`), true);
  const heading1 = getVariableValue('--cust-footer-column1-header', t('footerHeader1'));
  const heading2 = getVariableValue('--cust-footer-column2-header', t('footerHeader2'));

  const logoLink = getVariableValue('--cust-footer-logo-link', '', false, true);
  const cyear = new Date().getFullYear();
  const copyrightText = getVariableValue('--cust-footer-copyright', t('footerCopyright')).replace("(year)", cyear);

  // Column 1 data
  const column1 = [
    {
      text: getVariableValue('--cust-footer-column1-row1', t('footerCol1Row1')),
      link: getVariableValue('--cust-footer-column1-row1-link', '', false, true),
      id: 'footer-c1r1'
    },
    {
      text: getVariableValue('--cust-footer-column1-row2', t('footerCol1Row2')),
      link: getVariableValue('--cust-footer-column1-row2-link', '', false, true),
      id: 'footer-c1r2'
    },
    {
      text: getVariableValue('--cust-footer-column1-row3', t('footerCol1Row3')),
      link: getVariableValue('--cust-footer-column1-row3-link', '', false, true),
      id: 'footer-c1r3'
    }
  ];

  // Column 2 data
  const column2 = [
    {
      text: getVariableValue('--cust-footer-column2-row1', t('footerCol2Row1')),
      link: getVariableValue('--cust-footer-column2-row1-link', '', false, true),
      id: 'footer-c2r1'
    },
    {
      text: getVariableValue('--cust-footer-column2-row2', t('footerCol2Row2')),
      link: getVariableValue('--cust-footer-column2-row2-link', '', false, true),
      id: 'footer-c2r2'
    },
    {
      text: getVariableValue('--cust-footer-column2-row3', t('footerCol2Row3')),
      link: getVariableValue('--cust-footer-column2-row3-link', '', false, true),
      id: 'footer-c2r3'
    }
  ];

  // Column 3 data
  const column3 = [
    {
      text: getVariableValue('--cust-footer-column3-row1', t('footerCol3Row1')),
      link: getVariableValue('--cust-footer-column3-row1-link', '', false, true),
      id: 'footer-c3r1',
      className: 'companyLink companyName'
    },
    {
      text: getVariableValue('--cust-footer-column3-row2', t('footerCol3Row2')),
      link: getVariableValue('--cust-footer-column3-row2-link', '', false, true),
      id: 'footer-c3r2',
      className: 'companyLink'
    },
    {
      text: getVariableValue('--cust-footer-column3-row3', t('footerCol3Row3')),
      link: getVariableValue('--cust-footer-column3-row3-link', '', false, true),
      id: 'footer-c3r3',
      className: 'companyLink'
    }
  ];

  return (
    <div className="footer">
      <div className="footer-row">
        <div id="footer-column-one" className="footer-column">
          <div className="footHeading" id="footer-column-one-header">{heading1}</div>
          {column1.map((item) => renderFooterLink(item.link, item.text, item.id, 'footLink'))}
        </div>
        <div id="footer-column-two" className="footer-column">
          <div className="footHeading" id="footer-column-two-header">{heading2}</div>
          {column2.map((item) => renderFooterLink(item.link, item.text, item.id, 'footLink'))}
        </div>
        <div id="footer-column-three" className="footer-column">
          <div className="footer-logo-container">
            {renderFooterLogo(footerLogo, logoLink, column3[0].text)}
          </div>
          {column3.map((item) => renderFooterLink(item.link, item.text, item.id, item.className))}
        </div>
      </div>
      <div className="footerLastRow">{copyrightText}</div>
    </div>
  );
}
}
export default Footer
