import React, { Component } from 'react';

import { AbstractForm, ToggleButtons  } from 'lib/components';
import TimeZoneField from 'components/TimeZoneField';

import form from 'lib/form';
import { formatMoney } from "lib/i18n";

import { injectIntl } from 'react-intl';
import { appLocales } from '../../config.js';

import moment from 'moment';
import messages from './messages';


const m = moment("2017-12-31");
const space = String.fromCharCode(160);

const escape = (s) => s == " " ? space : s;

const LANGUAGES = {
    cs: "Čeština",
    en: "English",
    sk: "Slovenčina",
    de: "Deutsch"
};


const dateFormatItems = ["MM/DD/YYYY", "DD/MM/YYYY", "DD.MM.YYYY", "YYYY-MM-DD", "MM-DD-YYYY", "DD-MM-YYYY"].map(df => ({ value: df, label:m.format(df) }));
const numericFormatItems = [ { d: ".", t: "," }, { d: ".", t: space }, { d: ",", t: space } ].map(nf => ({ value: `${nf.t}${nf.d}`, label: `12${nf.t}345${nf.d}67`, payload: nf }) );

class LocaleSettings extends AbstractForm {


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

        let { intl, disabled, valueOf, i18n, getData, setValues } = this.props;

        let formProps = { disabled: disabled };

        let data = valueOf();
        let { thousandDelimiter, decimalDelimiter } = data;
        let ctx = { ...i18n, thousandDelimiter: thousandDelimiter, decimalDelimiter: decimalDelimiter };

        let currencyFormatItems = [ 
            { value: 'left', label: formatMoney(12345.67, data.currencySymbol, {...ctx, currencySymbolLeft: true } ) },
            { value: 'right', label: formatMoney(12345.67, data.currencySymbol, {...ctx, currencySymbolLeft: false } ) },
        ];


        let numericVal = { value: `${escape(thousandDelimiter)}${escape(decimalDelimiter)}` };

        return (
            <div className={ `form ${this.props.className}` }>
                { this.renderSelect("language", intl.formatMessage(messages.language), locales, { simpleValue: true, onChange: this.props.updateIntl, ...formProps }) }

                <div className="form-field">
                    <label>{ intl.formatMessage(messages.timezone) }</label>
                    <TimeZoneField 
                        disabled={ this.props.disabled }
                        className="table small-list"
                        value={ this.props.valueOf("timezone") }
                        onChange={ this.props.onChangeHandler('timezone', items => items) }
                        />
                </div>

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


                <div className="row row-margin-10">
                    <div className="col-xs-6 ph10">
                        <div className="form-field">
                            <label>{ intl.formatMessage(messages.numberFormat) }</label>
                            <ToggleButtons simpleValue={ false } value={ numericVal } options={ numericFormatItems } onChange={ (val) => setValues(null, { thousandDelimiter: escape(val.payload.t), decimalDelimiter: escape(val.payload.d) }) } />

                            <div className="toggle-buttons">

                            </div>
                        </div>
                    </div>
                    <div className="col-xs-6 ph10">
                        { this.renderToggleButtons("currencyFormat", intl.formatMessage(messages.moneyFormat), currencyFormatItems, formProps) }
                    </div>
                </div>

                <div className="row row-margin-10">
                    <div className="col-xs-12 ph10">
                        { this.renderToggleButtons("dateFormat", intl.formatMessage(messages.dateFormat), dateFormatItems, formProps) }
                    </div>
                </div>

            </div>
        );
    }

}



export default form(injectIntl(LocaleSettings));