import React, { useState } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react';
import { useStaticQuery, graphql } from "gatsby"
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import { Autoplay } from 'swiper';
import 'swiper/css';
import 'swiper/css/autoplay';

import Review from './Review';
import Modal from '../UI/Modal';

const Reviews = () => {
    const images = useStaticQuery(graphql`
    query {
        img1: file(relativePath: {eq: "reviews/1.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP)
            }
        },
        img2: file(relativePath: {eq: "reviews/2.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP)
            }
        },
        img3: file(relativePath: {eq: "reviews/3.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP)
            }
        },
        img4: file(relativePath: {eq: "reviews/4.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP)
            }
        }
    }`);
    const [reviews] = useState([
        {id: 0, img: images.img1, microdata: {text: 'Компания PROБизнес выражает благодарность Алене Крюковой за проведение сессии LEGO SERIOUS PLAY в составе команды модераторов на ежегодной дилерской конференции ЛУКОЙЛ', author: 'Лукойл', date: '2021-09-29'}},
        {id: 1, img: images.img2, microdata: {text: 'Выражаю огромную благодарность компании Talent Тeam за сотрудничество и проведение командообразущих мероприятий в ООО «Монтаж Телеком Сервис»', author: 'ООО "Монтаж Телеком Сервис"', date: '2023-06-24'}},
        {id: 2, img: images.img3, microdata: {text: 'Компания SenseMachine в лице управляющего директора Овчарова Алексея Викторовича и всей команды, выражает благодарность Алене Крюковой и Можаваева Кристине за высокопрофессиональную организацию и проведение стратегической сессии! Отличная подготовка мероприятия, профессионализм фасилитаторов и интересные, занимательные блоки - все это создало атмосферу настоящей вовлечённости и погружения в процесс. Спасибо Вам, что помогли сотрудникам нашей компании по-настоящему окунуться в процесс взаимодействия с друг другока, дали высказатеся и быть услышанными друг другом! Желаем Вашей компании процветания и надеемся на долгое сотрудничество!', author: 'SenseMachine', date: '2022-11-15'}},
        {id: 3, img: images.img4, microdata: {text: 'Руководство ООО «АМИ Клиник Север» выражает благодарность компании Talent Теаm за прекрасно проведенное мероприятие, которое позволило нам еще успешнее достигать высоких результатов! Ваши профессионализм, активная позиция и достойный пример вдохновляют наших на плодотворную работу, стремление к росту и получение новых умений и знаний. Мы ценим ваш вклад в развитие компании и верим, что совместно с вами наша компания достигнег нового уровня и процветания.', author: 'ООО "АМИ Клиник Север"', date: '2023-06-24'}},
    ])

    const [modal, setModal] = useState(false);
    const [modalImg, setModalImg] = useState('');

    return (
        <section className='py-24 max-md:py-16 max-md:px-3'>
            <div className="container mx-auto">
                <h2 className='text-3xl mb-20 max-md:mb-10 font-semibold text-slate-800 text-center uppercase'>Отзывы</h2>
                <div className='hidden' itemScope itemType="https://schema.org/AggregateRating">
                    <div itemProp="itemReviewed" itemScope itemType="https://schema.org/Organization">
                        <meta itemProp="name" content="Talent Team"/>
                        <meta itemProp="telephone" content="8 (920) 074 55-05"/>
                        <div itemProp="address" itemScope itemType="https://schema.org/PostalAddress">
                            <meta itemProp="addressLocality" content="Москва"/>
                            <meta itemProp="streetAddress" content="Льва Толстого, 16"/>
                        </div>
                    </div>
                    <meta itemProp="ratingValue" content='5'/>
                    <meta itemProp="bestRating" content='5'/>
                    <meta itemProp="reviewCount" content='4'/>
                </div>
                <Swiper modules={[Autoplay]} autoplay={true} spaceBetween={50} slidesPerView={1}
                    breakpoints={{
                        640: {
                            slidesPerView: 2,
                        },
                        1024: {
                            slidesPerView: 3,
                        },
                    }}>
                    {reviews.map(review=>
                        <SwiperSlide key={review.id} className='!h-auto'>
                            <Review key={review.id} img={review.img} microdata={review.microdata} onClick={()=>{setModalImg(review.img); setModal(true)}}></Review>
                        </SwiperSlide>
                    )}
                </Swiper>
            </div>
            <Modal active={modal} setActive={setModal} className='max-w-[650px]'>
                <div>
                    {modalImg &&
                        <GatsbyImage className='rounded-lg mb-2' loading='lazy' imgClassName="!object-contain" image={getImage(modalImg)} alt="logo" placeholder="none"/>
                    }
                </div>
            </Modal>
        </section>
    )
}

export default Reviews;