import React from 'react';
import './style.sass';
import {MainContext} from '../../context'
import { svgData } from '../../svgs'
import { WEBSIT_TYPE } from '../../constants'
const mobileBar  = React.createContext(null)
   const Right = (props) => {
     const { contactNumber, contactLink } = props

    const toggleView = () => {
      if(mobileBar?.current?.className?.match('change'))
        mobileBar?.current?.classList?.remove('change')
      else
        mobileBar?.current?.classList?.add('change')
    }
     return (
       <MainContext.Consumer>{data => {
          const socialMediaLinks = data?.socialMediaLinks || {}
          const arr =  Object.keys(socialMediaLinks) || []

        return(
          <nav className="wizrd-site-navigation wizrd-site-navigation-social" >
            { WEBSIT_TYPE.includes(data?.templateType) ? <ul>
                <li><a href={`tel:${ contactNumber }`} >{ contactNumber }</a></li>
                <li>{contactLink}</li>
              </ul>
            : <>
            <div class={`wizrd-mobile-icon`} ref={mobileBar} onClick={toggleView}>
              {/* <div class="bar1"></div>
              <div class="bar2"></div>
              <div class="bar3"></div> */}
              <span className="wizrd-mobile-open-icon">
                <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1.33301 2H22.6663" stroke="#0C014F" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M1.33301 10H22.6663" stroke="#0C014F" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M1.33301 18H22.6663" stroke="#0C014F" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
              <span className="wizrd-mobile-close-icon">
                <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.45703 2L17.542 17.0849" stroke="#0C014F" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M17.542 2L2.45705 17.0849" stroke="#0C014F" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
            </div>
            <ul>
              {
              data?.headerLinks?.map((headerLink) => {
                return(<li onClick={ toggleView } className="wizrd-mobile-nav">
                  {headerLink}
                </li>)
              })
              }
              { arr.map((item) => {
                  const link  = socialMediaLinks[ item ]
                  return(<li className="wizrd-header-social-links">
                  <a rel="noopener"  aria-label={ item } href={ link?.match('http') ?  link : `https://${ link }`} target='_blank'>
                    {svgData()[ item ]}
                  </a>
                </li>)
              })}
              <li>
                {data?.readOnly ? <a href='javasript:void(0)' className="btn btn-primary"  >Subscribe</a> :
                <button  className="btn btn-primary" onClick={ props.handleSubscribe }>Subscribe</button>
                }
              </li>
            </ul></>}
          </nav>
          )
         }}
       </MainContext.Consumer>

     );
   };

export default Right;