import React from "react";

import { sendLeasingOrder } from "../../../actions";

export default class FormRequest extends React.Component
{
	constructor(props)
	{
		super(props);
		this.state = {
			name: "", 
			phone: "", 
			email: "", 
			company: "", 
			success: false, 
		};
	}

	_onFormSubmit = (event) => 
	{
		event.preventDefault();
		sendLeasingOrder(this.state)
		.then(() => 
		{
			this.setState({ success: true });
		})
		.catch(() => 
		{

		});
	}

	_handle_onPersonaData = () => 
	{
		window.open(`${ process.env.NEXT_PUBLIC_MAIN_SITE }/personal_data/`, "_blank");
	}

	render()
	{
		const { name, phone, email, company, success } = this.state;

		return (
			<section id="order">
				<div className="container wide">
					<h2 className="section_title">Купить в лизинг?</h2>
					<div className="order_form">
						<div className="order_email">
							<p>Напишите на <a href="mailto:">info@evoleasing.ru</a> или заполните форму</p>
						</div>
						<form onSubmit={ (event) => this._onFormSubmit(event) }>
							{ !success ? (
								<>
									<div className="form_field">
									<input type="text" value={ name } placeholder="Имя" onChange={ (event) => this.setState({ name: event.target.value }) } required={ true }/>
									</div>
									<div className="form_field">
										<input type="tel" value={ phone } placeholder="Телефон" onChange={ (event) => this.setState({ phone: event.target.value }) } required={ true }/>
									</div>
									<div className="form_field">
										<input type="email" value={ email } placeholder="E-mail" onChange={ (event) => this.setState({ email: event.target.value }) } required={ true }/>
									</div>
									<div className="form_field">
										<input type="text" value={ company } placeholder="Организация" onChange={ (event) => this.setState({ company: event.target.value }) }/>
									</div>
									<div className="policy">
										<input type="checkbox" name="policy" id="policy" hidden checked onChange={ () => {} }/>
										<label htmlFor="policy">Даю свое согласие на обработку {`\u00A0`}<u onClick={ () => this._handle_onPersonaData() }>моих персональных данных</u></label>
									</div>
									<button className="button">Отправить</button>
								</>
							) : (
								<div style={{ minHeight: "400px", alignItems: "center", justifyContent: "center", display: "flex" }}>
									<p style={{ color: "#fff", fontSize: "24px", lineHeight: "34px" }}>Благодарим Вас за обращение, наши специалисты свяжутся с Вами в ближайшее время.</p>
								</div>
							) }
						</form>
					</div>
				</div>
			</section>
		)
	}
}