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

import styles from './card-blog-details.module.scss';
import {getCategoryUrl, getPostUrl, getStrapiImage} from "../../libs/utils";

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

export function CardBlogDetails({item}: CardBlogDetailsProps) {
  const {width, height} = item.image.data.attributes;
  const {title} = item;
  const shareUrl = getPostUrl(item);
  return (
    <div className={styles['container'] + " rounded-l p-8 overflow-hidden shadow-sm" +
      " bg-white" +
      " dark:bg-gray-800"}>
      <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={getCategoryUrl(item)}
               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
            text-gray-600
            dark:text-gray-300"
               dangerouslySetInnerHTML={{__html: delve(item, 'description', 'N/A')}} />
          <NextImage
            layout="responsive"
            width={width}
            height={height}
            objectFit="contain"
            className="rounded-lg my-5"
            src={getStrapiImage(item, "default")}
            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;