import React from 'react';
import {MainContext} from '../../context'
import './style.sass';
import { WEBSIT_TYPE } from '../../constants'
import footerLogo from '../../assets/images/footer-logo.svg'
import userAvtar from '../../assets/images/user-avatar.png'
import { svgData } from '../../svgs'
   const Footer = (props) => {

    const {pathname , user, handleSubscribe } = props
     return (
    <MainContext.Consumer>{data => {
      const socialMediaLinks = data?.socialMediaLinks || {}
      const arr =  Object.keys(socialMediaLinks) || []
    return(<footer className="wizrd-site-footer">
    {!WEBSIT_TYPE.includes(data.templateType) && <div className="wizrd-top-footer">
      {/* <div className="wizrd-footer-flags wizrd-flags">
        <div className="wizrd-top-flags">
          <svg width="213" height="106" viewBox="0 0 213 106" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M52 0H0L52 53V0Z" fill="#506BF0"/>
            <path d="M105 0H53L105 53V0Z" fill="#506BF0"/>
            <path d="M159 0H107L159 53V0Z" fill="#506BF0"/>
            <path d="M159 53H107L159 106V53Z" fill="#506BF0"/>
            <path d="M213 0H161L213 53V0Z" fill="#506BF0"/>
            <path d="M213 53H161L213 106V53Z" fill="#506BF0"/>
          </svg>
        </div>
        <div className="wizrd-bottom-flags">
          <svg width="213" height="106" viewBox="0 0 213 106" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M161 106L213 106L161 53L161 106Z" fill="white"/>
            <path d="M108 106L160 106L108 53L108 106Z" fill="white"/>
            <path d="M54 106L106 106L54 53L54 106Z" fill="white"/>
            <path d="M54 53L106 53L54 4.54598e-06L54 53Z" fill="white"/>
            <path d="M-3.8147e-06 106L52 106L-8.4481e-06 53L-3.8147e-06 106Z" fill="white"/>
            <path d="M-3.8147e-06 53L52 53L-8.4481e-06 4.54598e-06L-3.8147e-06 53Z" fill="white"/>
          </svg>
        </div>
      </div> */}
        <div className="wizrd-footer-box">
          {props.children}
          <div className='footer-box'>
              <div className="wizrd-author-box">
                <div className="wizrd-author-avtar">
                  <img src={ user?.profileImageUrl || userAvtar } alt="Jason Miller" />
                </div>
                <div className="wizrd-blog-author-details">
                  <span className='author-label'>Author</span>
                  <span className='wizrd-author-name'>{ user?.userName?.toUsername() }</span>
                  <span className='wizrd-author-bio'>{ user?.authorDescription }</span>
                  <ul className='social-media'>
                  { arr.map((item) => {
                      const link  = socialMediaLinks[ item ]
                      return(<li className="wizrd-header-social-links">
                      <a rel="noopener" target='_blank' href={ link?.match('http') ?  link : `https://${ link }`}>
                        {svgData()[ item ]}
                      </a>
                    </li>)
                  })}
                  </ul>
                </div>
                <button type="button" onClick={ handleSubscribe } className="btn btn-primary wizrd-author-subscription-action">Subscribe</button>
              </div>
            </div>
          {}
        </div>
        <div className="wizrd-footer-dots">
          <svg width="1264" height="293" viewBox="0 0 1264 293" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="149" cy="17" r="3" fill="white"/>
            <circle className="wizrd-footer-theme-dots" cx="3.5" cy="91.5" r="3.5" fill="#7EB8EE"/>
            <circle cx="738" cy="8" r="4" fill="white"/>
            <circle cx="624" cy="268" r="4" fill="white"/>
            <circle className="wizrd-footer-theme-dots" cx="368" cy="173" r="3" fill="#7EB8EE"/>
            <circle cx="266" cy="267" r="3" fill="white"/>
            <circle cx="217.5" cy="129.5" r="2.5" fill="white"/>
            <circle className="wizrd-footer-theme-dots" cx="54" cy="289" r="4" fill="#7EB8EE"/>
            <circle cx="128" cy="174" r="4" fill="white"/>
            <circle className="wizrd-footer-theme-dots" cx="1260" cy="264" r="4" fill="#7EB8EE"/>
            <circle className="wizrd-footer-theme-dots" cx="1089" cy="4" r="4" fill="#7EB8EE"/>
            <circle cx="453" cy="25" r="2" fill="white"/>
            <circle className="wizrd-footer-theme-dots" cx="916" cy="212" r="4" fill="#7EB8EE"/>
            <circle cx="924.5" cy="84.5" r="1.5" fill="white"/>
            <circle cx="1168" cy="174" r="2" fill="white"/>
            <circle cx="1042.5" cy="138.5" r="2.5" fill="white"/>
            <circle cx="1036" cy="272" r="4" fill="white"/>
          </svg>
        </div>
      </div>
      }
    <div className="wizrd-copyright">
    <div className="container">
      <a href={data.footerLogoUrl || '#'} target='_blank' rel='noopener'>
        {/* <span>powered By</span> */}
        <img className='footer-logo' src={footerLogo} alt="Wizard" />
      </a>
    </div>
    </div>
</footer>)
}}
</MainContext.Consumer>
     );
   };


String.prototype.toUsername = function(){
    return this.replace(/\@.*/,'');
}
export default Footer;