
import React from 'react'
import facebook from '../../assets/images/facebook-58.png'
import twitter from '../../assets/images/twitter.png'
import gmail from '../../assets/images/gmail.png'
import youtube from '../../assets/images/youtube-64.png'
import instagram from '../../assets/images/instagram.png'
import label from '../../assets/images/facebook-58.png'
import linkedin from '../../assets/images/linkedin.png'
import userAvatar from '../../assets/images/user-avatar.png'
import _ from 'lodash'
import { svgBWData } from '../../svgs'
import 'lazysizes';
import 'lazysizes/plugins/parent-fit/ls.parent-fit';
const BlogSideBar = (props) =>{
    return(
        <aside className="blog-sidebar">
            {props.children}
        </aside>)
}

const AuthorPage = (props) => {
    const data = props.data
    return(
    <div className="blog-widget">
    <div className="author-widget">
       <div className="author-info">
          <div className="author-img">
             <img src={data.profileImageUrl || userAvatar} alt="Jason Miller" />
          </div>
          <div className="author-name">
             <h2>Author</h2>
             <h3>{data.firstName} {data.lastName}</h3>
          </div>
       </div>
       <div className="author-bio">
          {data.bio}
       </div>
       {props.links && <SocialWidget links={props.links}/>}
    </div>
 </div>)
}

const ReletedBlogs = (props) => {
    const { blogs, Skeleton, loading } =  props

    const blogSeklton = () => {
        return [1,2,3].map((item) => {
            return(<div key={ item } class="col-sm-6 col-md-4 col-lg-4">
            <div class="card">
                <Skeleton rectangle={ true } height={ 200 } width={ '100%' } />
    
                <div class="card-block">
                    <div className="wizrd-recent-blog-tag">
                        <Skeleton count={ 1 }  />
                    </div>
                    <h5 class=""><Skeleton count={ 4 }  /></h5>
                    <div className="wizrd-recent-blog-author">
                        <span><Skeleton width={ 100 } count={ 1 }  /></span>
                        <span><Skeleton width={ 100 } count={ 1 }  /></span>
                    </div>
                </div>
    
            </div>
        </div>)
        
        })
       
    }
    return(
        <div className="wizrd-recent-blog-wrap related-article">
            <div className="container">
                <div className='wizrd-recent-blogs'>
                <h3>{!loading ? 'Related article' : <Skeleton width={ 200 } count={1}  /> } </h3>
                     
                    <div className='row'>
                        { loading && blogSeklton() }
                        {blogs.map((item, index) => {
                            return(
                            <div key={ index } class="col-sm-6 col-md-4 col-lg-4">
                                <div class="card">
                                    <div className='card-image'>
                                    <img
                                        data-sizes="auto"
                                        data-src="https://picsum.photos/200/150/?random"
                                        data-srcset="
                                        https://picsum.photos/200/150/?random 600w,
                                        https://picsum.photos/200/150/?random 220w,
                                        https://picsum.photos/200/150/?random 300w,
                                        https://picsum.photos/200/150/?random 600w,
                                        https://picsum.photos/200/150/?random 900w,
                                      "
                                        alt={`test${ index }`}
                                        class="lazyload"
                                    />
                                    </div>

                                    <div class="card-block">
                                        <div className="wizrd-recent-blog-tag">
                                            {/*<span>Others</span>*/}
                                        </div>
                                        <h5 class="">Die Hard is a 1988 American action film directed by John McTiernan and written by</h5>
                                        <div className="wizrd-recent-blog-author">
                                            <span>Emil Kristensin</span>
                                            <span>March  09, 2021</span>
                                        </div>
                                    </div>

                                </div>
                            </div>)
                        })}
                </div>
                </div>
            </div>
        </div>
    )
}

const TopBlogs = (props) => {
    return(
        <div className="blog-widget">
            <div className="top-wizrd-blog-article-widget">
            {props.children}
            </div>
        </div>
    )
}

const SocialWidget =(props) => {
    const { assessment, blog } = props
    const url = `https://${assessment?.customDomain || assessment?.domain}`
    const arr = ['facebook', 'twitter', 'linkedin', 'email']
    const SHARING_URLS = {
        'facebook': 'https://www.facebook.com/sharer/sharer.php?u=',
        'linkedin': 'https://www.linkedin.com/sharing/share-offsite/?url=',
        'twitter': 'https://twitter.com/intent/tweet/?url=',
        'email': (subject, body) => `mailto:?subject=${ subject }&body=${ body }`
    }
    const displayEmail = (blog, url) => {
        return ('Hello, \n' || JSON.stringify(blog.content)) + `${ url }/blog/${ blog?.slug }`
    }
    const displayUrl = (item) => {
        switch(item){
            case 'facebook':
                return `${SHARING_URLS[ item ]}${ url }/blog/${ blog?.slug }&display=page`
            case 'linkedin':
                return `${SHARING_URLS[ item ]}${ url }/blog/${ blog?.slug }`
            case 'twitter':
                return `${SHARING_URLS[ item ]}${ url }/blog/${ blog?.slug }`
            case 'email':
                return `${SHARING_URLS[ item ](blog?.title, displayEmail(blog, url) )}`
        }

    }
    return (
    <div className="social-follow-widget">
      <ul className='social-media-icons'>
      {
      arr.map((item) =>{
          return(
          <li className={ item }>
          <a href={ displayUrl(item) } aria-label={ item } rel="noopener noreferrer" target='_blank'>
              { svgBWData()[ item ] }

          </a>
        </li>)
      })
      }
      </ul>
  </div>)
}
BlogSideBar.TopBlogs = TopBlogs
BlogSideBar.AuthorPage = AuthorPage
BlogSideBar.ReletedBlogs = ReletedBlogs
BlogSideBar.SocialWidget = SocialWidget
export default BlogSideBar
