import React, { Component } from 'react'
import { StaticQuery, graphql } from 'gatsby'

import ServicesGIF from '../components/ServicesGIF'

import PlusSign from '../images/PlusSign.png'
import MinusSign from '../images/MinusSign.png'
import SiteTitleLogo from '../components/SiteTitleLogo'
import ServicesSliderWrap from '../components/ServicesSliderWrap'
import AccentBlueDots from '../images/blue-dots-min.png'
import BGservices from '../images/services-bg-min.png'
import AccentBlackPaint from '../images/paint-black.png'
import AccentGreenPaint from '../images/green-min.png'
import AccentPinkLips from '../images/lips-min.png'

class Services extends Component {
     constructor(props) {
          super(props);
          this.state = {
               isGifOpen: true
          }
     }

     handleClick = props => {
          this.props.tabClicked(2)

          const ServicesIntroGifWrap = document.querySelector('#services .intro-Gif-wrap');
          if (this.state.isGifOpen) {
               setTimeout(function () {
                    // console.log('fading out!')
                    ServicesIntroGifWrap.classList.add('invisible')
               }.bind(this), 2400)

               setTimeout(function () {
                    this.setState({ isGifOpen: false })
               }.bind(this), 3400)
          }
     }

     goToStartPage = () => {
          this.props.tabClicked(1)
     }

     render() {
          const bgColor = this.props.bgColor,
               pageTitle = this.props.title;
          return (
               <li id="services"
                    style={{ backgroundColor: bgColor }}
                    className={`
                         ${this.props.currentPg === 2 ? 'active-page' : 'not-active-page'} 
                         ${this.props.currentPg === 1 ? 'start-pg-open b-shadow-below' : 'b-shadow-above'}`
                    }>
                    <div className="section-title" onClick={this.handleClick}>
                         <header className="section-title-wrap" onClick={this.handleClick}>
                              <div className="section-title-inner-wrap">
                                   <h1>{pageTitle}</h1>
                                   <div className="text-light-blue tab-icon">
                                        {this.props.currentPg === 2 ? <img src={MinusSign} alt="minus sign" /> : <img src={PlusSign} alt="plus sign" />}
                                   </div>
                              </div>
                         </header>
                    </div>
                    {this.props.lazyLoadAll ? '' :
                         <div className="section-content text-white" style={{ backgroundImage: `url(${BGservices})` }} >
                              {this.state.isGifOpen ? <ServicesGIF bgColor={bgColor} /> : <div className="services-pg-wrap">
                                   <header className="site-logo" onClick={this.goToStartPage}>
                                        <SiteTitleLogo />
                                   </header>
                                   <div className="black-paint" style={{ backgroundImage: `url(${AccentBlackPaint})` }} />
                                   <div className="green-paint" style={{ backgroundImage: `url(${AccentGreenPaint})` }}>
                                        <div className="lips-wrap">
                                             <div className="lips" style={{ backgroundImage: `url(${AccentPinkLips})` }} />
                                        </div>
                                   </div>

                                   <section className="services">
                                        <div className="section-wrapper">
                                             <div className="blue-dots" style={{ backgroundImage: `url(${AccentBlueDots})` }}>
                                                  <ServicesSliderWrap />
                                             </div>
                                        </div>
                                   </section></div>}
                         </div>}
               </li>
          )
     }
}

export default Services