import React from 'react';
import Modularity from 'modularity-front';
import {Row,Col, Carousel} from 'react-materialize';

let Module = Modularity.Module;

class CarouselPanelModule extends Modularity.Module {
	constructor(props) {
		super(props);
		this.state = {
		}

	}
	

	

	render() {
		var panels = this.CarouselPanel.value.map((item)=>{
            return(
                <div className={item.panelClass}>
                    <h2>{item.header}</h2>
                    <p className={item.bodyClass}>{item.body}</p>
                </div>
            )
        })
		return(
            <Row>
                <Col s={12}>
                    <Carousel className="carousel carousel-slider center" 
                    fixedItem={<div className={this.CarouselButton.value.position}>
                    <a onClick= {(e) => console.log("clicked")}className={this.CarouselButton.value.style}>{this.CarouselButton.value.content}</a>
                  </div>}
                    options={{fullWidth:this.CarouselOptions.value.fullWidth,indicators:this.CarouselOptions.value.indicators}}>
                    {panels}
                    
                    </Carousel>
                    {super.render()}
                    
                </Col>
               </Row>
			);
				    
	}
}


CarouselPanelModule.Inputs = {
	CarouselTitle:{
		type: Module.Types.Text,
		defaultValue:"Product Title"
    },
    CarouselPanel:{
        type: Module.Types.Array,
        defaultValue:[{
            header:"First Panel",
            body:"this is the first panel",
            panelClass:"red",
            bodyClass:"white-text"
        },
        {
            header:"second Panel",
            body:"this is the second panel",
            panelClass:"amber",
            bodyClass:"white-text"
        },
        {  
            header:"third Panel",
            body:"this is the third panel",
            panelClass:"blue",
            bodyClass:"white-text"

        }],
        arrType: Module.Types.Object
    },
    CarouselOptions:{
        type:Module.Types.Object,
        defaultValue:{
            fullWidth:true,
            indicators:true
        },
        
    },
    CarouselImages:{
        type: Module.Types.Array,
        defaultValue:["car1.jpg","car2.jpg","car3.jpg","car4.jpg"],
        arrType:Module.Types.Text
    },
    CarouselButton: {
        type:Module.Types.Object,
        defaultValue: {
            position:"carousel-fixed-item center",
            style:"btn waves-effect white grey-text darken-text-2",
            content:"Click me"
        }
    }
}

CarouselPanelModule.Category = "sxoinas";
export default CarouselPanelModule;