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

/**
 * Renders a link item - handles external URLs, internal routes, and plain text
 */
const renderLinkItem = (link, text, id, className, showBreak = true) => {
  const isExternal = link.length > 0 && link.toLowerCase().startsWith('http')
  const isInternal = link.length > 0 && !isExternal
  const breakElement = showBreak ? <br /> : null

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

  if (isExternal) {
    return (
      <span className={className}>
        <a id={id} href={link}>{text}</a>{breakElement}
      </span>
    )
  }

  if (isInternal) {
    return (
      <span className={className}>
        <Link to={link} id={id} onClick={handleClick}>{text}</Link>{breakElement}
      </span>
    )
  }

  return <span className={className === 'companyLink' ? 'companyLink' : 'footText'}>{text}{breakElement}</span>
}

/**
 * Renders the logo with optional link wrapper
 */
const renderLogo = (logoLink, footerLogo) => {

  const handleClick = () => {
    // Use requestAnimationFrame to ensure scroll happens after navigation
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        window.scrollTo(0, 0);
      });
    });
  };
  
  const logoImg = <img src={footerLogo} alt="logo" className="footerLogo" />

  if (logoLink.length > 0 && logoLink.toLowerCase().startsWith('http')) {
    return <a id="footer-logo-link" href={logoLink}>{logoImg}</a>
  }

  if (logoLink.length > 0) {
    return <Link to={logoLink} id="footer-logo-link" onClick={handleClick}>{logoImg}</Link>
  }

  return logoImg
}

/**
 * This component represents the footer in the store
 */
const Footer = () => {
  const footerLogo = getVariableValue('--POC-footer-logo', require(`$assets/images/xmpie-POC-theme-logo.png`), true)
  const logoLink = getVariableValue('--cust-footer-logo-link', '', false, true)

  const columns = [
    {
      id: 'footer-column-one',
      headerId: 'footer-colunm-one-header',
      header: getVariableValue('--POC-footer-column1-header', t('footerHeader1')),
      className: 'footLink',
      rows: [
        { text: getVariableValue('--POC-footer-column1-row1', t('footerCol1Row1')), link: getVariableValue('--POC-footer-column1-row1-link', '', false, true), id: 'footer-c1r1' },
        { text: getVariableValue('--POC-footer-column1-row2', t('footerCol1Row2')), link: getVariableValue('--POC-footer-column1-row2-link', '', false, true), id: 'footer-c1r2' },
        { text: getVariableValue('--POC-footer-column1-row3', t('footerCol1Row3')), link: getVariableValue('--POC-footer-column1-row3-link', '', false, true), id: 'footer-c1r3', showBreak: false },
      ]
    },
    {
      id: 'footer-column-two',
      headerId: 'footer-colunm-two-header',
      header: getVariableValue('--POC-footer-column2-header', t('footerHeader2')),
      className: 'footLink',
      extraClass: 'footer-column',
      rows: [
        { text: getVariableValue('--POC-footer-column2-row1', t('footerCol2Row1')), link: getVariableValue('--POC-footer-column2-row1-link', '', false, true), id: 'footer-c2r1' },
        { text: getVariableValue('--POC-footer-column2-row2', t('footerCol2Row2')), link: getVariableValue('--POC-footer-column2-row2-link', '', false, true), id: 'footer-c2r2' },
        { text: getVariableValue('--POC-footer-column2-row3', t('footerCol2Row3')), link: getVariableValue('--POC-footer-column2-row3-link', '', false, true), id: 'footer-c2r3' },
      ]
    },
    {
      id: 'footer-column-three',
      header: null,
      className: 'companyLink',
      extraClass: 'footer-column',
      hasLogo: true,
      rows: [
        { text: getVariableValue('--POC-footer-column3-row1', t('footerCol3Row1')), link: getVariableValue('--POC-footer-column3-row1-link', '', false, true), id: 'footer-c3r1' },
        { text: getVariableValue('--POC-footer-column3-row2', t('footerCol3Row2')), link: getVariableValue('--POC-footer-column3-row2-link', '', false, true), id: 'footer-c3r2' },
        { text: getVariableValue('--POC-footer-column3-row3', t('footerCol3Row3')), link: getVariableValue('--POC-footer-column3-row3-link', 'https://www.xmpie.com/products/web-to-print/storeflow/', false, true), id: 'footer-c3r3', showBreak: false },
      ]
    }
  ]

  return (
    <div className="footer">
      {columns.map((column) => (
        <div key={column.id} id={column.id} className={column.extraClass || ''}>
          {column.header && (
            <>
              <span className="footHeading" id={column.headerId}>{column.header}</span><br />
            </>
          )}
          {column.hasLogo && (
            <div className="footer-logo-container">
              {renderLogo(logoLink, footerLogo)}
            </div>
          )}
          {column.hasLogo && <br />}
          {column.rows.map((row) => (
            <React.Fragment key={row.id}>
              {renderLinkItem(row.link, row.text, row.id, column.className, row.showBreak !== false)}
            </React.Fragment>
          ))}
        </div>
      ))}
    </div>
  )
}

export default Footer
