accommodations.jsx

import React, { Component } from 'react';
import Slider from "react-slick";
import { Link } from 'react-router-dom';
import CardAcomodacoes from '../CardAcomodacoes/CardAcomodacoes';
import leftArrow from './arrow_left.svg'
import './acomodacoes.css';

function NextArrowa(props) {
  const { onClick } = props;
  return (
    <img src={leftArrow} onClick={ onClick } className="acomodacoes-arrow next-arrow" alt=""/>
  );
}

function PrevArrow(props) {
  const { onClick } = props;
  return (
    <img src={leftArrow} onClick={ onClick } className="acomodacoes-arrow prev-arrow" alt=""/>
  );
}

class Acomodacoes extends Component {
  state = { // Remember to CHANGE when backend is done!
    locations: [
      {
        id: 0,
        title: 'bangolow',
        subtitle: 'família',
        text: 'Nosso bungalow família tem 80 m2 distribuídos em 03 quartos (com ar condicionado split), sendo 01 térreo e 02 no 1 piso.',
        image: 'https://public-v2links.adobecc.com/577c0731-419a-41a4-5a2a-1f7416306b25/component?params=component_id:c14c3e1d-ba91-4e8f-8fcf-7beebdd293a5&params=version:0&token=1559488146_da39a3ee_a6728efce877840defbb941032099bb56eda0ba4&api_key=CometServer1',
        link: '/1'
      },
      {
        id: 1,
        title: 'quarto',
        subtitle: 'casal',
        text: 'Quarto para casal com 42 m2, banheira, varanda, televisão e muita privacidade.',
        image: 'https://images.unsplash.com/photo-1559311745-a57f6233488e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1417&q=80',
        link: '/2'
      },
      {
        id: 2,
        title: 'mansão',
        subtitle: 'todo mundo',
        text: 'Casa gigantesca com tudo que é necessárioo para disfrutar de um final de semana inesquecível na praia dos carneiros.',
        image: 'https://public-v2links.adobecc.com/577c0731-419a-41a4-5a2a-1f7416306b25/component?params=component_id:74257cde-e0b5-4a6b-9335-2d8c21d672be&params=version:0&token=1559488146_da39a3ee_a6728efce877840defbb941032099bb56eda0ba4&api_key=CometServer1',
        link: '/3'
      }
    ],
    shownImage: 0,
  }

  render() {
    let settings = {
      dots: true,
      dotsClass: 'acomodacoes-dots',
      appendDots: dots => <div>{dots}</div>,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      beforeChange: (current, next) => this.setState({ shownImage: next }),
      prevArrow: <PrevArrow />,
      nextArrow: <NextArrow />
    };

    let settingsMobile = {
      dots: true,
      dotsClass: 'acomodacoes-dots',
      appendDots: dots => <div>{dots}</div>,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      beforeChange: (current, next) => this.setState({ shownImage: next }),
      arrows: false,
      centerMode: true,
      centerPadding: '15px',
    };


    return (
      <section className="acomodacoes">

        {/* Desktop version */}
        <div className="acomodacoes-container">
          <div className="acomodacoes-text">
            <h3 className="acomodacoes-title">acomodações</h3>
            <div className="acomodacoes-content">
              <Slider {...settings} className="acomodacoes-slider" >
                {this.state.locations.map(location => {
                  return(
                    <CardAcomodacoes
                    key={location.id}
                    title={location.title}
                    subtitle={location.subtitle}
                    text={location.text}
                    link={location.link}/>
                  )
                })}
              </Slider>
            </div>
          </div>
          {this.state.locations.map((location, index) => {
            return(
              <img src={location.image}
              key={location.id}
              style={(index===this.state.shownImage) ? {display: 'block'} : {display: 'none'}}
              className="acomodacoes-image"
              alt="Imagem da acomodação atual"/>
            );
          })}
        </div>

        {/* Mobile Version */}
        <div className="acomodacoes-mobile">
          <h3 className="acomodacoes-title">acomodações</h3>
          <div className="acomodacoes-mobile-top">
            <Slider {...settingsMobile} className="acomodacoes-mobile-slider" >
              {this.state.locations.map(location => {
                return(
                  <div className="acomodacoes-mobile-image-box">
                    <img src={location.image}
                    className="acomodacoes-mobile-image"
                    alt="Imagem da acomodação atual"/>
                  </div>
                );
              })}
            </Slider>
          </div>
          <div className="acomodacoes-mobile-bottom">
          {this.state.locations.map((location, index) => {
            return(
              <div className="acomodacoes-mobile-card-box" style={(index===this.state.shownImage) ? {display: 'flex'} : {display: 'none'}}>
                <CardAcomodacoes
                key={location.id}
                title={location.title}
                subtitle={location.subtitle}
                text={location.text}
                link={location.link}/>
              </div>
            );
          })}
          </div>

        </div>

      </section>
    );
  }
}

export default Acomodacoes;