import * as React from 'react';
import Slider from 'react-slick';
import {graphql} from 'gatsby';
import {GatsbyImage} from 'gatsby-plugin-image';

import Badge from '../../components/Badge/Badge';
import SocialMediaTooltips from "../../components/SocialMediaTooltips/SocialMediaTooltips";
import getConfidence from '../../helpers/getConfidence';

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import Layout from "../../components/Layout/Layout";

function ProductPage({location, pageContext, data}) {
    const settings = {
        customPaging(i) {
            return (
                <a>
                    <GatsbyImage
                        image={images[i].gatsbyImageData}
                        alt={`${name} image thumb ${i}`}
                    />
                </a>
            );
        },
        dots: true,
        infinite: false,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        nextArrow: <></>,
        prevArrow: <></>,
    };

    const images = data.allImageSharp.nodes;

    const MEDIA_LIST = ['TalkWalker', 'Twitter', 'Instagram', 'Google Search'];

    const {name, tags, sources, description, socialMedia} = pageContext.data;

    return (
        <Layout breafcrumbs={location}>
            <div className="product">
                <div className="product__data product__data--mobile">
                    <h1 className="product__title">{name}</h1>
                    <p className="product__subtitle">Current Trend</p>
                    <div
                        className={`product__confidence product__confidence--${getConfidence(socialMedia)}`}
                    >
                        <SocialMediaTooltips product={pageContext.data}/>
                    </div>
                </div>
                <div className="product__slider">
                    <Slider {...settings}>
                        {images.map((image, index) => (
                            <GatsbyImage
                                key={index}
                                image={image.gatsbyImageData}
                                alt={`${name} image ${index}`}
                            />
                        ))}
                    </Slider>
                </div>
                <div className="product__data product__data--desktop">
                    <h1 className="product__title">{name}</h1>
                    <p className="product__subtitle">Current Signal</p>
                    <div
                        className={`product__confidence product__confidence--${getConfidence(socialMedia)}`}
                    >
                        <SocialMediaTooltips product={pageContext.data}/>
                    </div>
                    <div className="product__badge-list">
                        {tags.split(",").map((tag, index) => (
                            <Badge tag={tag} key={`badge_${index}`}/>
                        ))}
                    </div>
                    <div className="product__badge-list">

                        {sources.split(",").map((source, index) => (
                            <Badge tag={source} key={`badge_${index}`} isSource={true}/>
                        ))}
                    </div>
                    <p className="product__description">{description}</p>
                    <ul className="product__media">
                        {MEDIA_LIST
                            .sort((prev, current) => socialMedia[current] ? socialMedia[current]?.Social_Media_Influence - socialMedia[prev]?.Social_Media_Influence : -1)
                            .map((media, index) => (
                                <li className="product__media-item" key={`media_${index}`}>
                                    <input
                                        id={media.replace(' ', '')}
                                        type="checkbox"
                                        checked={socialMedia[media]?.found}
                                        className="checkbox"
                                        disabled
                                    />
                                    <label
                                        htmlFor={media.replace(' ', '')}>{media}</label>
                                </li>
                            ))}
                    </ul>
                </div>
            </div>
        </Layout>
    );
}

export default ProductPage;

export const query = graphql`
  query ProductImages($images: [String]) {
    allImageSharp(
      sort: { original: { src: ASC } }
      filter: { fluid: { originalName: { in: $images } } }
    ) {
      nodes {
        gatsbyImageData(
          width: 600
          height: 800
          placeholder: BLURRED
          transformOptions: { cropFocus: CENTER, fit: COVER }
        )
        fluid {
          originalName
        }
      }
    }
  }
`;
