import { id as mid } from "module";
import { djbase, djclass } from "../declare";
import { whenRendered } from "../tsx/render";
import { TraceSource } from "@implab/core-amd/log/TraceSource";
import _WidgetBase = require("dijit/_WidgetBase");
import _FormValueMixin = require("dijit/form/_FormValueMixin");
import { scrollIntoView } from "dojo/window";
import { get } from "@implab/core-amd/safe";

const trace = TraceSource.get(mid);

const isValueWidget = <W>(w: W): w is W & _FormValueMixin =>
    typeof w === "object" && w !== null && "value" in w;

const testMember = <T extends object>(member: keyof T, type?: "function" | "boolean" | "string" | "number" | "object") => type ?
    <V extends object>(v: V): v is V & T => typeof v === "object" && v !== null && (typeof (v as V & T)[member] === type) :
    <V extends object>(v: V): v is V & T => typeof v === "object" && v !== null && (member in v);

// reset method support
type Resettable = { reset(): void };

const isResettable = testMember<Resettable>("reset", "function");

// validation support
type Validatable = { validate(): boolean };

const isValidatable = testMember<Validatable>("validate", "function");

// checkbox/toggle button/radio widgets support
type CheckedProp = { checked: boolean };

const hasCheckedProp = testMember<CheckedProp>("checked", "boolean");

// multi-select support
type MultipleProp = { multiple: unknown };

const hasMultipleProp = testMember<MultipleProp>("multiple");

// declared class
type DeclaredClassProp = { declaredClass: string };

const hasDeclaredClassProp = testMember<DeclaredClassProp>("declaredClass", "string");

// state

type StateProp = { state: string };

const hasStateProp = testMember<StateProp>("state", "string");

// common type for form members
type FormValueWidget = _WidgetBase & _FormValueMixin;

/** Traverses child widgets collecting form inputs.
 * 
 * @param children Widgets to traverse.
 * @returns The array of form inputs.
 */
const collectDescendantFormWidgets = (children: _WidgetBase[]): (FormValueWidget)[] => children
    .map(child =>
        isValueWidget(child) ?
            [child] :
            collectDescendantFormWidgets(child.getChildren())
    )
    .reduce((res, part) => res.concat(part), []);

// helper functions to manipulate the form value

/** checks whether the value is and object and returns it otherwise returns 
 * a new empty object. Useful to auto-crete a nested objects on demand.
 */
const _obj = (v: unknown) => (typeof v === "object" && v !== null ? v : {}) as Record<string, unknown>;

type MergeHint = "array" | "append" | "unset";

/** Combines the values
 * 
 * @param prev The previous value, `undefined` if none
 * @param value The new value to store
 * @param hint The hint how to combine values
 */
const _combine = (prev: unknown, value: unknown, hint?: MergeHint) =>
    // write the value as an array and append new values to it
    hint === "array" ? prev === undefined ? [value] : ([] as unknown[]).concat(prev, value) :
        // write the value as is and convert it the array when new values are appended
        hint === "append" ? prev === undefined ? value : ([] as unknown[]).concat(prev, value) :
            // write the value only if the previous one is undefined
            hint === "unset" ? prev === undefined ? value : prev :
                // overwrite
                value;

/** Merges the specified value to the object. The function takes a path for the
 * new value and creates a nested objects if needed. The hint is used to control
 * how to store a new or update the existing value.
 */
const _merge = (
    [prop, ...rest]: string[],
    obj: Record<string, unknown>,
    value: unknown,
    hint?: MergeHint
): unknown => ({
    ...obj,
    [prop]: rest.length > 0 ?
        _merge(rest, _obj(obj[prop]), value) :
        _combine(obj[prop], value, hint)
});

/** Merges the specified value to the object. The function takes a path for the
 * new value and creates a nested objects if needed. The hint is used to control
 * how to store a new or update the existing value.
 * 
 * @param name The path of the property to assign, `x.y.z`
 * @param value The value for the specified property
 * @param hint The hint how to store the value. The valid values are:
 *   `array`, `append`, `unset`.
 */
const _assign = (name: string, obj: object, value: unknown, hint?: MergeHint) =>
    _merge(name.split("."), _obj(obj), value, hint) as object;

@djclass
abstract class _FormMixin extends djbase<_WidgetBase<Record<string, Event>>>() {

    /** The form value. When assigned in the constructor is considered as
     * initial (reset value) value of the form.
     */
    value?: object | undefined;

    _resetValue?: object | undefined;

    private _pending: { value: object; priority?: boolean | null } | undefined;

    state: "Error" | "Incomplete" | "" = "";

    _onChangeDelayTimer = { remove: () => { } };

    /** Fill in form values from according to an Object (in the format returned
     * by get('value'))
     * 
     * This method schedules updating form values after 
     */
    _setValueAttr(value: object, priority?: boolean | null) {
        if (!this._pending) {
            Promise.resolve() // delay value update
                .then(whenRendered) // await for the rendering to complete
                .then(() => {
                    if (this._pending) { // double check
                        const { value, priority } = this._pending;
                        this._pending = undefined;
                        this._setValueImpl(value, priority);
                    }
                }).catch(e => trace.error(e));
        }
        this._pending = { value, priority };
    }

    getDescendantFormWidgets() {
        return collectDescendantFormWidgets(this.getChildren());
    }

    /**
     * Resets contents of the form to initial value if any. If an input doesn't
     * have a corresponding initial value it is reset to its default value.
     */
    reset() {
        this.getDescendantFormWidgets()
            .filter(isResettable)
            .forEach(w => w.reset());
        if (this._resetValue)
            this.set("value", this._resetValue);
    }

    /**
     * returns if the form is valid - same as isValid - but
     * provides a few additional (ui-specific) features:
     * 
     * 1. it will highlight any sub-widgets that are not valid
     * 2. it will call focus() on the first invalid sub-widget
     */
    validate() {
        const [firstError] = this.getDescendantFormWidgets()
            .map(w => {
                w._hasBeenBlurred = true;
                const valid = w.disabled || !isValidatable(w) || w.validate();
                return valid ? null : w;
            })
            .filter(Boolean);

        if (firstError) {
            scrollIntoView(firstError.containerNode || firstError.domNode);
            firstError.focus();
            return false;
        } else {
            return true;
        }
    }

    _setValueImpl(obj: object, priority?: boolean | null) {
        const map = this.getDescendantFormWidgets()
            .filter(w => w.name)
            .reduce((g, w) => {
                const entry = g[w.name];
                return {
                    ...g,
                    [w.name]: entry ? entry.concat(w) : [w]
                };
            }, {} as Record<string, FormValueWidget[]>);

        Object.keys(map).forEach(name => {
            const widgets = map[name];
            const _values = get(name, obj) as unknown;

            if (_values !== undefined) {
                const values = ([] as unknown[]).concat(_values);

                const [w] = widgets; // at least one widget per group
                if (hasCheckedProp(w)) {
                    widgets.forEach(w =>
                        w.set("value", values.indexOf(w._get("value")) >= 0, priority)
                    );
                } else if (hasMultipleProp(w) && w.multiple) {
                    w.set("value", values, priority);
                } else {
                    widgets.forEach((w, i) => w.set("value", values[i], priority));
                }
            }
        });

        // Note: no need to call this._set("value", ...) as the child updates will trigger onChange events
        // which I am monitoring.
    }

    _getValueAttr() {
        return this.getDescendantFormWidgets()
            .map(widget => {
                const name = widget.name;
                if (name && !widget.disabled) {

                    const value = widget.get("value") as unknown;

                    if (hasCheckedProp(widget)) {
                        if (hasDeclaredClassProp(widget) && /Radio/.test(widget.declaredClass)) {
                            // radio button
                            if (value !== false) {
                                return { name, value };
                            } else {
                                // give radio widgets a default of null
                                return { name, value: null, hint: "unset" as const};
                            }
                        } else {
                            // checkbox/toggle button
                            return value !== false ?
                                { name, value, hint: "array" as const} :
                                // empty array when no checkboxes are selected
                                { name, value: [], hint: "unset" as const }; 
                        }
                    } else {
                        return { name, value, hint: "append" as const};
                    }
                }
                return {};
            })
            .reduce((obj, { name, value, hint }) => name ? _assign(name, obj, value, hint) : obj, {});
    }

    /** Returns true if all of the widgets are valid.
     * @deprecated will be removed
     */
    isValid() {
        return this.state === "";
    }

    /** Triggered when the validity state changes */
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    onValidStateChange(validity: boolean) {
    }

    _getState() {
        const states = this.getDescendantFormWidgets().filter(hasStateProp).map(w => w.get("state"));

        return states.indexOf("Error") >= 0 ? "Error" :
            states.indexOf("Incomplete") >= 0 ? "Incomplete" : "";
    }

    _onChildChange(attr: string) {
        // summary:
        //		Called when child's value or disabled state changes

        // The unit tests expect state update to be synchronous, so update it immediately.
        if (!attr || attr == "state" || attr == "disabled") {
            this._set("state", this._getState());
        }

        // Use defer() to collapse value changes in multiple children into a single
        // update to my value.   Multiple updates will occur on:
        //	1. Form.set()
        //	2. Form.reset()
        //	3. user selecting a radio button (which will de-select another radio button,
        //		 causing two onChange events)
        if (!attr || attr == "value" || attr == "disabled" || attr == "checked") {
            if (this._onChangeDelayTimer) {
                this._onChangeDelayTimer.remove();
            }
            this._onChangeDelayTimer = this.defer(() => {
                this._onChangeDelayTimer = { remove: () => { } };
                this._set("value", this._getValueAttr());
            }, 10);
        }
    }

    postCreate() {
        super.postCreate();

        this._resetValue = this.value;

        this.on("attrmodified-state, attrmodified-disabled, attrmodified-value, attrmodified-checked", this._onAttrModified);
        this.watch("state", (prop, ov, nv) => this.onValidStateChange(nv === ""));
    }

    private readonly _onAttrModified = ({ target, type }: Event) => {
        // ignore events that I fire on myself because my children changed
        if (target !== this.domNode) {
            this._onChildChange(type.replace("attrmodified-", ""));
        }
    };
}

export default _FormMixin;