/**
 * @todo can do default form styles here
 */
// forms
import * as React from 'react';
import { styled } from 'styleh-components';
import { PluginsContext } from '@skava/forms/build/dist/new-forms/plugins/PluginsContext';
import { OneObserverForm } from '@skava/forms/build/dist/new-forms/OneForm/OneForm';
import { FormState, OneFormState, InputState, } from '@skava/forms/build/dist/exports';
import { ValidationStrategyContext, } from '@skava/forms/build/dist/new-forms/strategies';
import { TextBoxPlugin, IncrementerPlugin, CreditCardPlugin, PasswordPlugin, ConfirmPasswordPlugin, SelectDropDownPlugin, LabelPlugin, RadioGroupPlugin, TogglePlugin, StyledToggleItem, StyledLabel, AddressLinePlugin, ZipCodePlugin, CityPlugin, CountryPlugin, ProvincePlugin, TelephonePlugin, NamePlugin, EmailPlugin, 
// command + space for more
TextAreaPlugin, ExpiryDatePlugin, } from '@skava/forms/build/dist/new-forms/plugins';
export { StyledInput } from '@skava/forms/build/dist/exports';
export { toCreditCard } from '@skava/forms/build/dist/exports';
export { OneObserverForm } from '@skava/forms/build/dist/new-forms/OneForm/OneForm';
export { PluginsContext, OneFormState, InputState, FormState, ValidationStrategyContext, };
/**
 * @description basically take all inputs from all forms => 1 obj
 */
export function serializeInputsToObj(list) {
    const result = {};
    list.forEach(item => Object.keys(item).forEach(key => {
        result[key] = item[key];
    }));
    return result;
}
export const StyledAddressLinePlugin = styled(AddressLinePlugin) ``;
export const StyledZipCodePlugin = styled(ZipCodePlugin) ``;
export const StyledCityPlugin = styled(CityPlugin) ``;
export const StyledCountryPlugin = styled(CountryPlugin) ``;
export const StyledProvincePlugin = styled(ProvincePlugin) ``;
export const StyledTelephonePlugin = styled(TelephonePlugin) ``;
export const StyledNamePlugin = styled(NamePlugin) ``;
export const StyledEmailPlugin = styled(EmailPlugin) ``;
export const StyledTextBoxPlugin = styled(TextBoxPlugin) ``;
export const StyledIncrementerPlugin = styled(IncrementerPlugin) ``;
export const StyledCreditCardPlugin = styled(CreditCardPlugin) ``;
export const StyledPasswordPlugin = styled(PasswordPlugin) ``;
export const StyledConfirmPasswordPlugin = styled(ConfirmPasswordPlugin) ``;
export const StyledSelectDropDownPlugin = styled(SelectDropDownPlugin) ``;
export const StyledRadioGroupPlugin = styled(RadioGroupPlugin) ``;
export const StyledLabelPlugin = styled(LabelPlugin) ``;
export const StyledTogglePlugin = styled(TogglePlugin) ``;
// not in defaults because we only use it once
// TextAreaPlugin, ExpiryDatePlugin
export { TextAreaPlugin, ExpiryDatePlugin };
export { StyledToggleItem, StyledLabel };
// background: purple;
export const StyledOneObserverForm = styled(OneObserverForm) ``;
/**
 * @note had to cast to any first because styled + frozen
 */
export const DEFAULT_FORM_PLUGIN_LIST = Object.freeze([
    StyledAddressLinePlugin,
    StyledZipCodePlugin,
    StyledCityPlugin,
    StyledCountryPlugin,
    StyledProvincePlugin,
    StyledTelephonePlugin,
    StyledNamePlugin,
    StyledEmailPlugin,
    TextAreaPlugin,
    ExpiryDatePlugin,
    // rest
    StyledIncrementerPlugin,
    StyledCreditCardPlugin,
    StyledConfirmPasswordPlugin,
    StyledSelectDropDownPlugin,
    StyledRadioGroupPlugin,
    StyledLabelPlugin,
    StyledTogglePlugin,
    StyledTextBoxPlugin,
]);
export class DefaultFormPluginProvider extends React.PureComponent {
    render() {
        return (React.createElement(PluginsContext.Provider, { value: DEFAULT_FORM_PLUGIN_LIST }, this.props.children));
    }
}
const DEFAULT_VALIDATION_STATE = Object.freeze({
    onFocus: (args) => {
        // const serialized = args.state.toJSON() as SerializedObj
        console.debug('[forms] default onFocus');
    },
    onSubmit: (args) => {
        // const serialized = args.state.toJSON() as SerializedObj
        console.debug('[forms] default onSubmit');
    },
    onChange: (args) => {
        // const serialized = args.state.toJSON() as SerializedObj
        console.debug('[forms] default onChange');
    },
    onBlur: (args) => {
        console.debug('[forms] default onBlur');
    },
});
export class EasyFormProvider extends React.PureComponent {
    constructor() {
        super(...arguments);
        /**
         * keeps it optimized
         * @todo cleanup use exotic toDeepSeal
         */
        this.state = Object.seal({
            validation: Object.seal({
                ...DEFAULT_VALIDATION_STATE,
                ...this.props.validation,
            }),
        });
    }
    /**
     * check if it is === (or undefined) for all props on validation
     */
    updateValidation(props) {
        const state = this.state.validation;
        const { onBlur, onSubmit, onChange, onFocus } = props.validation;
        const isBlurEq = onBlur === undefined || onBlur === state.onBlur;
        const isSubmitEq = onSubmit === undefined || onSubmit === state.onSubmit;
        const isChangeEq = onChange === undefined || onChange === state.onChange;
        const isFocusEq = onFocus === undefined || onFocus === state.onFocus;
        const isEq = isBlurEq && isSubmitEq && isChangeEq && isFocusEq;
        if (isEq === true) {
            console.debug('[updateValidation] prevented update :)');
            return;
        }
        this.setState({
            validation: {
                ...this.state.validation,
                ...this.props.validation,
            },
        });
    }
    /**
     * allows merging in validation context in an optimized fashioon
     */
    componentDidUpdate(props) {
        this.updateValidation(props);
    }
    render() {
        const { pluginList } = this.props;
        return (React.createElement(ValidationStrategyContext.Provider, { value: this.state.validation },
            React.createElement(PluginsContext.Provider, { value: pluginList }, this.props.children)));
    }
}
EasyFormProvider.defaultProps = {
    pluginList: DEFAULT_FORM_PLUGIN_LIST,
};
/**
 * @note can be styled like `styled(EasyForm)`
 */
export class EasyForm extends React.PureComponent {
    render() {
        const { pluginList, validation, ...formProps } = this.props;
        return (React.createElement(EasyFormProvider, { pluginList: pluginList, validation: validation },
            React.createElement(StyledOneObserverForm, Object.assign({}, formProps))));
    }
}
//# sourceMappingURL=Form.js.map