import React from 'react';
import Modularity from 'modularity-front';
import { Row, Col, Card ,Collection , CollectionItem} from 'react-materialize';
import GoogleMap from '../../Modules/GoogleMap';
import Form from '../../Modules/Form';
import Toast from '../../helpers/Toast';
import Dictionary from '../../Services/DictionaryService';
import './ContactPackage.css'
import TonerSalesInfo from '../../Inputs/TonersalesInfo';
import ContactInputs from '../../Inputs/ContactInputs';
import API from '../../Services/API';


import { Button } from 'react-materialize';

const Module = Modularity.Module;

class ContactPackage extends Modularity.Module {
	constructor(props){
		super(props);
		this.API = new API();
		this.state = {
			formKey: 1
		}
		console.log("Info",TonerSalesInfo);
	}

	contact = (data) => {
		if(data.email) {
			this.API.post('/contact',data)
			.then((res) => {
				Toast.success(Dictionary.get("Email was sent"));
				this.setState({
					formKey: Math.random()
				})
			});
		}
	}

	render(){
		const info = Object.keys(TonerSalesInfo).map((key,index) => {
			return(
				<CollectionItem>
					<div className="title">{key}</div>
					<div className="items">{TonerSalesInfo[key]}</div>
				</CollectionItem>
				)
		});


		return( 
			<div className="contact">
				<Row>
					<Col s={8}>
						<Collection header={<div className="cont_title">Τοποθεσία Καταστήματος</div>}>
							<CollectionItem className={'no-padding'}>
								<GoogleMap />	
							</CollectionItem>		
						</Collection>
					</Col>
					<Col s ={4}>
						<Collection header={<div className="cont_title">Στοιχεια Καταστήματος</div>}>
							{info}
						</Collection>
					</Col>
				</Row>
				<Row>
					<Col s={12}>
						<div className="form_container">
							<Row className="center cont_title">Επικοινωνήστε Μαζί μας</Row>
							<Form key={this.state.formKey} onSubmit={(data) => this.contact(data) } FormInputs={ContactInputs} activeButton = {true} button = {'Αποστολή'} 
							withCaptcha CaptchaKey={'6LcaRqcUAAAAAJRvSwHNtyRDwUiGYcuAfIQVaA1W'}/>
						</div>
					</Col>
				</Row>
			</div>
		)
			
	}
	
}


ContactPackage.Inputs = {
	
}
ContactPackage.Category = "Sxoinas Packages";

export default ContactPackage;