import { id as mid } from "module";
import { djbase, djclass } from "@implab/djx/declare";
import { bind, createElement, prop } from "@implab/djx/tsx";
import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase";
import Form from "@implab/djx/form/Form";
import { TraceSource } from "@implab/core-amd/log/TraceSource";
import DateTextBox = require("dijit/form/DateTextBox");
import Button = require("dijit/form/Button");
import ValidationTextBox = require("dijit/form/ValidationTextBox");

const trace = TraceSource.get(mid);

interface NewAppointmentProps {
    title: string;

    startAt?: Date;
}

@djclass
export default class NewAppointment extends djbase(DjxWidgetBase) {
    value: NewAppointmentProps = {title: "Appointment 1"};

    render() {
        return <section>
            <Form<NewAppointmentProps> ref={bind("value", prop(this, "value"))}
                method="DIALOG"
                onSubmit={this._onSubmit}
                onReset={this._onReset}
                onValidStateChange={this._onValidStateChange}
                onValueChange={this._onValueChange}
            >
                <p><label>Title: <ValidationTextBox required name="title"/></label></p>
                <p><label>Appointment date: <DateTextBox required name="startAt"/></label></p>
                <footer>
                    <Button type="submit">Send</Button>
                    <Button type="reset">Reset</Button>
                </footer>
            </Form>
        </section>;
    }

    private readonly _onSubmit = (evt: Event) => {
        trace.debug("onSubmit");
    };

    private readonly _onValidStateChange = (isValid?: boolean) => {
        trace.debug("isValid={0}", isValid);
    };

    private readonly _onValueChange = (value: NewAppointmentProps) => {
        trace.debug("valueChange={0}", value);
    };

    private readonly _onReset = (evt: Event) => {
        trace.debug("onReset");
        //evt.preventDefault();
    };

}