import React, { Component } from "react"
import './Footer.scss'
import { Router, Link } from '$routes'
import { t } from '$themelocalization'
import { getVariableValue } from '$ustoreinternal/services/cssVariables'

/**
 * This component represents the footer in the store
 */
class Footer extends Component {
  render() {
    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 textCol1row1 = getVariableValue('--cust-footer-column1-row1', t('footerCol1Row1'));
    const textCol1row2 = getVariableValue('--cust-footer-column1-row2', t('footerCol1Row2'));
    const textCol1row3 = getVariableValue('--cust-footer-column1-row3', t('footerCol1Row3'));
    const linkCol1row1 = getVariableValue('--cust-footer-column1-row1-link', '', false, true);
    const linkCol1row2 = getVariableValue('--cust-footer-column1-row2-link', '', false, true);
    const linkCol1row3 = getVariableValue('--cust-footer-column1-row3-link', '', false, true);
    const textCol2row1 = getVariableValue('--cust-footer-column2-row1', t('footerCol2Row1'));
    const textCol2row2 = getVariableValue('--cust-footer-column2-row2', t('footerCol2Row2'));
    const textCol2row3 = getVariableValue('--cust-footer-column2-row3', t('footerCol2Row3'));
    const linkCol2row1 = getVariableValue('--cust-footer-column2-row1-link', '', false, true);
    const linkCol2row2 = getVariableValue('--cust-footer-column2-row2-link', '', false, true);
    const linkCol2row3 = getVariableValue('--cust-footer-column2-row3-link', '', false, true);
    const textCol3row1 = getVariableValue('--cust-footer-column3-row1', t('footerCol3Row1'));
    const textCol3row2 = getVariableValue('--cust-footer-column3-row2', t('footerCol3Row2'));
    const textCol3row3 = getVariableValue('--cust-footer-column3-row3', t('footerCol3Row3'));
    const linkCol3row1 = getVariableValue('--cust-footer-column3-row1-link', '', false, true);
    const linkCol3row2 = getVariableValue('--cust-footer-column3-row2-link', '', false, true);
    const linkCol3row3 = getVariableValue('--cust-footer-column3-row3-link', '', false, true);
    const logoLink = getVariableValue('--cust-footer-logo-link', '', false, true);

    return (
      <div className="footer">
        <div id="footer-column-one">
          <span className="footHeading" id="footer-colunm-one-header">{heading1}</span><br />
          {linkCol1row1.length > 0 
          ? <span className="footLink"><Link to={linkCol1row1}>
              <a id="footer-c1r1">{textCol1row1}</a>
            </Link><br /></span>
          : <span className="footText">{textCol1row1}<br /></span>
          }
          {linkCol1row2.length > 0
          ? <span className="footLink"><Link to={linkCol1row2}>
              <a id="footer-c1r2">{textCol1row2}</a>
            </Link><br /></span>
          : <span className="footText">{textCol1row2}<br /></span>
          }
          {linkCol1row3.length > 0
          ? <span className="footLink"><Link to={linkCol1row3}>
              <a id="footer-c1r3">{textCol1row3}</a>
            </Link></span>
          : <span className="footText">{textCol1row3}</span>
          }
        </div>
        <div className="footer-column" id="footer-column-two">
        <span className="footHeading" id="footer-colunm-two-header">{heading2}</span><br />
          {linkCol2row1.length > 0
          ? <span className="footLink"><Link to={linkCol2row1}>
              <a id="footer-c2r1">{textCol2row1}</a>
            </Link><br /></span>
          : <span className="footText">{textCol2row1}<br /></span>
          }
          {linkCol2row2.length > 0
          ? <span className="footLink"><Link to={linkCol2row2}>
              <a id="footer-c2r2">{textCol2row2}</a>
            </Link><br /></span>
          : <span className="footText">{textCol2row2}<br /></span>
          }
          {linkCol2row3.length > 0
          ? <span className="footLink"><Link to={linkCol2row3}>
              <a id="footer-c2r3">{textCol2row3}</a>
            </Link><br /></span>
          : <span className="footText">{textCol2row3}<br /></span>
          }
        </div>
        <div className="footer-column"  id="footer-column-three">
        <div className="footer-logo-container">
          {logoLink.length > 0
          ? <Link to={logoLink}><a id="footer-logo-link">
            <img src={footerLogo} className="footerLogo" />
          </a></Link>
          : <img src={footerLogo} className="footerLogo" />
          }
          </div><br />
          {linkCol3row1.length > 0
          ? <span className="companyLink"><Link to={linkCol3row1}>
              <a id="footer-c3r1">{textCol3row1}</a>
            </Link><br /></span>
          : <span className="companyName">{textCol3row1}<br /></span>
          }
          {linkCol3row2.length > 0
          ? <span className="footLink"><Link to={linkCol3row2}>
              <a id="footer-c3r2">{textCol3row2}</a>
            </Link><br /></span>
          : <span className="footText">{textCol3row2}<br /></span>
          }
          {linkCol3row3.length > 0
          ? <span className="footLink"><Link to={linkCol3row3}>
              <a id="footer-c3r3">{textCol3row3}</a>
            </Link></span>
          : <span className="footText">{textCol3row3}</span>
          }
        </div>
      </div>
    )
  }
}
export default Footer
