import React, { Component } from 'react';

import { AbstractForm } from 'lib/components';
import TaxTemplates from 'components/TaxTemplates';
import PaymentAccounts from 'components/PaymentAccounts';
import TimeZoneField from 'components/TimeZoneField';
import Toast from 'components/Toast';

import form from 'lib/form';
import validator from 'lib/validator';
import { injectIntl } from 'react-intl';

import { appLocales } from '../../config.js';


require("./style.scss");

//TODO add tabs

class SettingsForm extends AbstractForm {


	render() {
		let currencyFormats = [
			{ value: 'left', label: "Left" },
			{ value: 'right', label: "Right" }
		];
		let dateFormats = [
			{ value: 'MM/DD/YYYY', label: "MM/DD/YYYY" },
			{ value: 'DD/MM/YYYY', label: "DD/MM/YYYY" },
			{ value: 'DD.MM.YYYY', label: "DD.MM.YYYY" },
			{ value: 'YYYY-MM-DD', label: "YYYY-MM-DD" },
			{ value: 'MM-DD-YYYY', label: "MM-DD-YYYY" },
			{ value: 'DD-MM-YYYY', label: "DD-MM-YYYY" },
		];

		let locales = [];
		for (let i = 0; i < appLocales.length; i++) {
			locales.push({value: appLocales[i], label: appLocales[i]});
		}


		let intl = this.props.intl;
		let formProps = { disabled: this.props.disabled };

		return (
			<div className={ this.props.className }>
				
            	<div className="row row-margin-10">
            		<div className="col-xs-12 p10">

							<div className="form">
								<div className="row row-margin-10">
									<div className="col-md-6">
										<div className="col-xs-12">
											<div className="p10 box">
												<h3 className="pv15">{ intl.formatMessage({ id: "settings.section.subject" }) }</h3>
												{ this.renderField("name", intl.formatMessage({ id: "unit.entity.name" }), formProps) }
												{ this.renderField("idNumber", intl.formatMessage({ id: "unit.entity.idNumber" }), formProps) }
												{ this.renderField("taxNumber", intl.formatMessage({ id: "unit.entity.taxNumber" }), formProps) }
												{ this.renderTextArea("address", intl.formatMessage({ id: "unit.entity.address" }), formProps) }

												<div className="row row-margin-10">
													<div className="col-xs-6 ph10">
														{ this.renderField("currency", intl.formatMessage({ id: "common.entity.currency" }), { disabled: true }) }
													</div>
													<div className="col-xs-6 ph10">
														{ this.renderField("currencySymbol", intl.formatMessage({ id: "common.entity.currencySymbol" }), formProps) }
													</div>
												</div>
											</div>
										</div>
									</div>

									<div className="col-sm-6">
										<h3 className="pv15">{ intl.formatMessage({ id: "settings.section.locale" }) }</h3>
										{ this.renderSelect("locale", intl.formatMessage({ id: "unit.entity.language" }), locales, formProps) }
										{ this.renderField("decimalDelimiter", intl.formatMessage({ id: "unit.entity.decimalDelimiter" }), formProps) }
										{ this.renderField("thousandDelimiter", intl.formatMessage({ id: "unit.entity.thousandSeparator" }), formProps) }
										{ this.renderSelect("currencyFormat", intl.formatMessage({ id: "unit.entity.currencyFormat" }), currencyFormats, formProps) }
										{ this.renderSelect("dateFormat", intl.formatMessage({ id: "unit.entity.dateFormat" }), dateFormats, formProps) }
										<TimeZoneField 
											disabled={ this.props.disabled }
											value={ this.props.valueOf("timezone") }
											onChange={ this.props.onChangeHandler('timezone', items => items) }
											/>
									</div>

								</div>
							</div>
						</div>
				</div>

				<div className="row row-margin-10">
					<div className="col-md-6 p10">
						<h3 className="pv15">{ intl.formatMessage({ id: "settings.section.taxTemplates" }) }</h3>
						<div className="box">
							<TaxTemplates 
								disabled={ this.props.disabled }
								className="table small-list"
								items={ this.props.valueOf('taxTemplates') }
								currencySymbol={ this.props.valueOf('currencySymbol', '') }
								onChange={ this.props.onChangeHandler('taxTemplates', items => items) }
								sortFunction={ (items) => items.sortBy(p => p.get("name")) }
								/>
						</div>
					</div>
					<div className="col-md-6 p10">
						<h3 className="pv15">{ intl.formatMessage({ id: "settings.section.paymentAccounts" }) }</h3>
						<div className="box">
							<PaymentAccounts
								disabled={ this.props.disabled }
								className="table small-list"
								items={ this.props.valueOf('paymentAccounts') }
								onChange={ this.props.onChangeHandler('paymentAccounts', items => items) }
								sortFunction={ (items) => items.sortBy(p => p.get("name")) }
								/>
						</div>
					</div>
				</div>


				<div className="row row-margin-10">
					<div className="col-md-6 p10">
						<h3 className="pv15">{ intl.formatMessage({ id: "settings.section.email" }) }</h3>
						<div className="box form p10">
							{ this.renderField("emailSenderAddress", intl.formatMessage({ id: "unit.entity.emailSenderAddress" }), formProps) }
							{ this.renderField("invoiceEmailSubject", intl.formatMessage({ id: "unit.entity.invoiceEmailSubject" }), formProps) }
							{ this.renderField("invoiceThankYouNote", intl.formatMessage({ id: "unit.entity.invoiceThankYouNote" }), formProps) }
							{ this.renderTextArea("emailSignature", intl.formatMessage({ id: "unit.entity.emailSignature" }), formProps) }
						</div>
					</div>
					<div className="col-md-6 p10">
					</div>
				</div>

			</div>
		);
	}

}


export default form(injectIntl(SettingsForm), {
	onValidationFailed: Toast.validationFailed,
	validate: (settings, error) => {
		let valid = true;
		if (!validator.required(settings.name)) {
			error({ field: "name", msg: "Name is required" })
			valid = false;
		}
		if (!validator.required(settings.currency)) {
			error({ field: "name", msg: "Name is required" })
			valid = false;
		}
		if (!validator.required(settings.currencySymbol)) {
			error({ field: "name", msg: "Name is required" })
			valid = false;
		}
		return valid;
	}
});
