banner-rebase-jsx

import React, { Component } from 'react';
import Slider from 'react-slick';
import playArrow from './play-arrow.svg';
import rightArrow from './right-arrow.svg';
import leftArrow from './left-arrow.svg';
import './banner.css';
import { Link } from 'react-router-dom';

function NextSlide(props) {
  const { onClick } = props;
  return (
    <div onClick={ onClick } className="banner-arrow-container">
      <img className="banner-arrow" src={ rightArrow } alt="previous arrow" />
    </div>
  );
}

function PrevSlide(props) {
  const { onClick } = props;
  return (
    <div onClick={ onClick } id="banner-arrow-left" className="banner-arrow-container">
      <img className="banner-arrow" src={ leftArrow } alt="next arrow" />
    </div>
  );
}

class Banner extends Component {

  constructor(props){
    super(props);
    this.state = {
      videoPreview: 'https://media.giphy.com/media/lpI71bwDWLM7mEV8Sf/giphy.gif',
      tour: '<iframe width="100%" height="100vh" style="width: 100%; height: 100%;" src="https://www.google.com/maps/embed?pb=!4v1559222392357!6m8!1m7!1sCAoSLEFGMVFpcFBvaEdibktnbzRxRVpON21JaTlGanNabzNlcnpfMWt1dE9uSXNY!2m2!1d-8.7045821876584!2d-35.080530367716!3f174.77973645732317!4f-30.183789800098268!5f0.7820865974627469" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>',
      dotTour: 'banner-dot-activated',
      dot360: 'banner-dot',
      bannerWidth: {},
      bannerHeight: {},
      bannerFooter: {},
    }
    this.handleScreenChange = this.handleScreenChange.bind(this);
  }

  handleScreenChange(){
    let width = window.innerWidth;
    if(width <= 1024){
      this.setState({
        ...this.state,
        bannerWidth : '100%',
        bannerFooter: this.props.newStyle.display,
      })
    }
    else{
      this.setState({
        ...this.state,
        bannerWidth: this.props.newStyle.width,
        bannerHeight: this.props.newStyle.height,
        bannerFooter: this.props.newStyle.display,
      })
    }
  }
  componentDidMount(){
    if(typeof this.props.newStyle !== 'undefined') {
      this.handleScreenChange();
      }
  }
  componentWillMount(){
    window.addEventListener('resize', this.handleScreenChange)

  }

  render() {
    const dotTour = (slide) => {
      const dotStyle = slide ? 'banner-dot-activated' : 'banner-dot';
      this.state.dotTour = dotStyle;
    }

    const dot360 = (slide) => {
      const dotStyle = slide ? 'banner-dot' : 'banner-dot-activated';
      this.state.dot360 = dotStyle;
    }

    const bannerSettings = {
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      infinite: true,
      autoplay: false,
      arrows: true,
      prevArrow: <PrevSlide />,
      nextArrow: <NextSlide />,
      beforeChange: (current, next) => {
        dotTour(current);
        dot360(current);
        return this.setState({ oldSlide: current, activeSlide: next })
      },
      afterChange: current => this.setState({ activeSlide2: current }),
      responsive: [
        {
          breakpoint: 1025,
          settings: {
            arrows: false
          }
        }
      ]
    }
    return (
      <section className="banner" style={{width: this.state.bannerWidth, height: this.state.bannerHeight}}>
        <div className="slick-wraper">
          <Slider { ...bannerSettings } >
            <div className="banner-slide">
              <img className="banner-gif" src={ this.state.videoPreview } alt="hotel video preview" />
              <a href="" target="_blank" className="play-button-container">
                <div className="play-button">
                  <img src={ playArrow } alt="play" />
                </div>
                <div className="banner-video-text">
                  <p>Assista</p>
                  <p id="banner-button-last-text">ao vídeo completo</p>
                </div>
              </a>
            </div>
            <div className="banner-slide">
              <div className="banner-tour" dangerouslySetInnerHTML={{ __html: this.state.tour }}></div>
            </div>
          </Slider>
          <div className="banner-slider-menu">
            <div className="banner-arrows-container">
            </div>
            <div id="banner-button-text" className="banner-slider-menu-content-container">
              <div className="banner-slider-menu-content-semi">
                <p className={ this.state.dotTour }>Vídeo <span>tour</span></p>
              </div>
              <div className="banner-slider-menu-content-semi">
                <p className={ this.state.dot360 }>360° <span>tour</span></p>
              </div>
            </div>
            <div id="banner-button-numbers" className="banner-slider-menu-content-container">
              <div className="banner-slider-menu-content-semi">
                <p id="banner-number-1" className={ this.state.dotTour }>01</p>
              </div>
              <div className="banner-slider-menu-content-semi">
                <p id="banner-number-2" className={ this.state.dot360 }>02</p>
              </div>
            </div>
          </div>
        </div>
        <div className="banner-footer" style={{display: this.state.bannerFooter}}>
          <Link style={{
            textDecoration: 'none',
            color: '#fff',
            cursor: 'pointer',
            }}
            to="/">
            FAÇA SUA RESERVA
          </Link>
        </div>
      </section>
    );

  }
}

export default Banner;