import React from 'react';
import { connect } from "react-redux";

import { getPhotogalary } from "../../actions/photogalaryActions";

import './gallery.scss';

import Sidebar from '../../components/sidebar/Sidebar';
import Footer from '../../components/footer/Footer';

class Gallery extends React.Component {
    componentDidMount() {
        this.props.getPhotogalary()
    }

    render() {
        const { gallery } = this.props;
        //console.log('gallery', this.props.gallery);
        return (
            <>
                <Sidebar/>
                <div className="container-wrap events">
                    <div className="caption-page">
                        <h2>Gallery page</h2>
                    </div>
                </div>
                <div className="container-wrap">
                    <div className="gallery-wrap">
                        {
                            gallery.map((item,ind) => 
                                <div className="gallery-item" key={ind}>
                                    <h3>{item.eventTitle}</h3>
                                    <h5>{item.eventType}</h5>

                                    <div className="gallery-photo">
                                        {
                                            item.pictures.map((photo,ind) => 
                                                <div className="photo-item" key={ind}>
                                                    <div className="photo-item-bg">
                                                        <img src={photo} alt={item.eventType} />
                                                    </div>
                                                </div>
                                            )
                                        }
                                    </div>
                                </div>
                            )
                        }
                    </div>
                </div>
                <Footer/>
            </>
        )
    }
};

const mapStateToProps = state => {
    return {
        gallery: state.photogalaryReducer.gallery
    };
};

export default connect(
    mapStateToProps,
    { getPhotogalary }
)(Gallery);