import delve from 'dlv';
import NextImage from "next/image";
import {
  FacebookIcon,
  FacebookMessengerIcon,
  FacebookMessengerShareButton,
  FacebookShareButton,
  LinkedinIcon,
  LinkedinShareButton,
  TwitterIcon,
  TwitterShareButton,
  WhatsappIcon,
  WhatsappShareButton
} from "react-share";

import {environment} from "../../environments/environment";

import styles from './card-blog-details.module.scss';

/* eslint-disable-next-line */
export interface CardBlogDetailsProps {
  item: any;
}

export function CardBlogDetails({item}: CardBlogDetailsProps) {
  const {alternativeText, width, height} = item.image.data.attributes;
  const {slug} = item.category.data.attributes;
  const {title} = item;
  const shareUrl = `${environment.appUrl}/blog/${slug}/${item.slug}`;
  console.log(shareUrl);
  return (
    <div className={styles['container'] + " bg-white rounded-l p-8 overflow-hidden shadow-sm"}>
      <header className="md:flex flex-col">
        <h2 className="text-3xl mb-5 text-bold">
          {delve(item, 'title', 'N/A')}
        </h2>
        <section className="flex items-center justify-between">
          <div className="flex">
            <a href="#" className="flex items-center">
              <img
                src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80"
                alt="avatar" className="mr-4 w-10 h-10 object-cover rounded-full hidden sm:block"/>
              <h3 className="text-gray-700 text-normal font-bold hover:underline text-slate-400">Par Alex John</h3>
            </a>
          </div>
          <div className="flex flex-col">
            <a href={'/blog/' + delve(item, 'category.data.attributes.slug', '')}
               className="px-2 py-1 text-sm bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500">
              {delve(item, 'category.data.attributes.name', 'N/A')}
            </a>
          </div>
        </section>
      </header>
      <hr className="border-gray-100 my-5 sm:mx-auto dark:border-gray-700 container mx-auto"/>
      <main>
        <section>
          <div className="whitespace-pre-wrap text-lg font-bold text-slate-500"
               dangerouslySetInnerHTML={{__html: delve(item, 'description', 'N/A')}}/>
          <NextImage
            layout="responsive"
            width={width}
            height={height}
            objectFit="contain"
            className="rounded-lg my-5"
            src={environment.strapiUrl + delve(item, 'image.data.attributes.url', '')}
            alt={delve(item, 'title', 'N/A')}/>
        </section>
        <section className="whitespace-pre-wrap text-lg text-slate-400"
                 dangerouslySetInnerHTML={{__html: delve(item, 'content', 'N/A')}}/>
        <hr className="border-gray-100 my-5 sm:mx-auto dark:border-gray-700 container mx-auto"/>
        <section className="flex justify-between">
          <div>
            <h4 className="font-bold text-lg text-gray-400 mb-2">Partager cet article</h4>
            <div className="grid grid-cols-5 gap-2">
              <FacebookShareButton url={shareUrl}>
                <FacebookIcon size={32} round/>
              </FacebookShareButton>
              <FacebookMessengerShareButton
                url={shareUrl}
                appId="521270401588372"
                className="Demo__some-network__share-button"
              >
                <FacebookMessengerIcon size={32} round/>
              </FacebookMessengerShareButton>
              <TwitterShareButton
                url={shareUrl}
                title={title}
                className="Demo__some-network__share-button"
              >
                <TwitterIcon size={32} round/>
              </TwitterShareButton>
              <WhatsappShareButton
                url={shareUrl}
                title={title}
                separator=":: "
                className="Demo__some-network__share-button"
              >
                <WhatsappIcon size={32} round/>
              </WhatsappShareButton>
              <LinkedinShareButton url={shareUrl} className="Demo__some-network__share-button">
                <LinkedinIcon size={32} round/>
              </LinkedinShareButton>
            </div>
          </div>
        </section>
      </main>
    </div>
  );
}

export default CardBlogDetails;