"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const Immutable = require("immutable");
const core_1 = require("./core");
class Label extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = { p: "creating" };
    }
    componentWillReceiveProps(new_props) {
        this.props.debug_info && console.log("New props:", this.props.debug_info());
        this.setState(Object.assign({}, this.state, { p: new_props.p(new_props.value).comp(new_props.context)(callback => x => new_props.cont(callback)(x)) }));
    }
    componentWillMount() {
        this.setState(Object.assign({}, this.state, { p: this.props.p(this.props.value).comp(this.props.context)(callback => x => this.props.cont(callback)(x)) }));
    }
    render() {
        let content = this.state.p == "creating" ? null : this.state.p;
        let span = React.createElement("span", { key: "label_span" }, this.props.text);
        return React.createElement("label", { className: this.props.className }, this.props.span_before_content ? [span, content] : [content, span]);
    }
}
function label(text, span_before_content, className, key, dbg) {
    return p => value => core_1.make_C(ctxt => cont => (React.createElement(Label, { kind: "label", className: className, debug_info: dbg, text: text, span_before_content: span_before_content, value: value, p: p, context: ctxt, cont: cont, key: key })));
}
exports.label = label;
class H1 extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = { p: "creating" };
    }
    componentWillReceiveProps(new_props) {
        this.props.debug_info && console.log("New props:", this.props.debug_info());
        this.setState(Object.assign({}, this.state, { p: new_props.p(new_props.value).comp(new_props.context)(callback => x => new_props.cont(callback)(x)) }));
    }
    componentWillMount() {
        this.setState(Object.assign({}, this.state, { p: this.props.p(this.props.value).comp(this.props.context)(callback => x => this.props.cont(callback)(x)) }));
    }
    render() {
        let content = this.state.p == "creating" ? null : this.state.p;
        let span = React.createElement("span", null, this.props.text);
        return React.createElement("div", { className: this.props.className },
            React.createElement("h1", null, span),
            content);
    }
}
function h1(text, className, key, dbg) {
    return p => value => core_1.make_C(ctxt => cont => (React.createElement(H1, { kind: "h1", className: className, debug_info: dbg, text: text, value: value, p: p, context: ctxt, cont: cont, key: key })));
}
exports.h1 = h1;
class H2 extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = { p: "creating" };
    }
    componentWillReceiveProps(new_props) {
        this.props.debug_info && console.log("New props:", this.props.debug_info());
        this.setState(Object.assign({}, this.state, { p: new_props.p(new_props.value).comp(new_props.context)(callback => x => new_props.cont(callback)(x)) }));
    }
    componentWillMount() {
        this.setState(Object.assign({}, this.state, { p: this.props.p(this.props.value).comp(this.props.context)(callback => x => this.props.cont(callback)(x)) }));
    }
    render() {
        let content = this.state.p == "creating" ? null : this.state.p;
        let span = React.createElement("span", null, this.props.text);
        return React.createElement("div", { className: this.props.className },
            React.createElement("h2", null, span),
            content);
    }
}
function h2(text, className, key, dbg) {
    return p => value => core_1.make_C(ctxt => cont => (React.createElement(H2, { kind: "h2", className: className, debug_info: dbg, text: text, value: value, p: p, context: ctxt, cont: cont, key: key })));
}
exports.h2 = h2;
class Div extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = { p: "creating" };
    }
    componentWillReceiveProps(new_props) {
        this.props.debug_info && console.log("New props:", this.props.debug_info());
        this.setState(Object.assign({}, this.state, { p: new_props.p(new_props.value).comp(new_props.context)(callback => x => new_props.cont(callback)(x)) }));
    }
    componentWillMount() {
        this.setState(Object.assign({}, this.state, { p: this.props.p(this.props.value).comp(this.props.context)(callback => x => this.props.cont(callback)(x)) }));
    }
    render() {
        return React.createElement("div", { className: this.props.className }, this.state.p != "creating" ? this.state.p : []);
    }
}
function div(className, key, dbg) {
    return p => value => core_1.make_C(ctxt => cont => (React.createElement(Div, { kind: "div", className: className, debug_info: dbg, value: value, p: p, context: ctxt, cont: cont, key: key })));
}
exports.div = div;
function overlay(key, dbg) {
    return p => div(`overlay`)(div(`overlay__item`)(p));
}
exports.overlay = overlay;
class Form extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = { p: "creating" };
    }
    componentWillReceiveProps(new_props) {
        this.props.debug_info && console.log("New props:", this.props.debug_info());
        this.setState(Object.assign({}, this.state, { p: new_props.p(new_props.value).comp(new_props.context)(callback => x => new_props.cont(callback)(x)) }));
    }
    componentWillMount() {
        this.setState(Object.assign({}, this.state, { p: this.props.p(this.props.value).comp(this.props.context)(callback => x => this.props.cont(callback)(x)) }));
    }
    render() {
        return React.createElement("form", { className: this.props.className }, this.state.p != "creating" ? this.state.p : []);
    }
}
function form(className, key, dbg) {
    return p => value => core_1.make_C(ctxt => cont => (React.createElement(Form, { kind: "form", className: className, debug_info: dbg, value: value, p: p, context: ctxt, cont: cont, key: key })));
}
exports.form = form;
class Selector extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = { selected: props.selected_item != undefined ? props.items.findIndex(i => props.to_string(i) == props.to_string(props.selected_item)) : undefined };
    }
    componentWillMount() {
        if (this.props.selected_item != undefined)
            this.props.cont(() => null)(this.props.selected_item);
    }
    render() {
        if (this.props.type == "dropdown")
            return React.createElement("select", { value: this.state.selected == undefined ? "-1" : this.state.selected.toString(), onChange: e => {
                    if (e.currentTarget.value == "-1") {
                        this.setState(Object.assign({}, this.state, { selected: undefined }));
                        return;
                    }
                    let selected_index = parseInt(e.currentTarget.value);
                    let selected = this.props.items.get(selected_index);
                    this.setState(Object.assign({}, this.state, { selected: selected_index }), () => this.props.cont(() => { })(selected));
                } },
                React.createElement("option", { value: "-1" }),
                this.props.items.map((i, i_index) => {
                    let i_s = this.props.to_string(i);
                    return React.createElement("option", { key: i_s, value: i_index }, i_s);
                }));
        else if (this.props.type == "radio") {
            return React.createElement("form", null, this.props.items.map((i, i_index) => {
                let i_s = this.props.to_string(i);
                return React.createElement("div", { key: i_s },
                    React.createElement("label", null,
                        i_s,
                        React.createElement("input", { key: i_s, name: name, type: "radio", checked: i_index == this.state.selected, onChange: e => {
                                if (e.currentTarget.checked == false)
                                    return;
                                let selected = this.props.items.get(i_index);
                                this.setState(Object.assign({}, this.state, { selected: i_index }), () => this.props.cont(() => { })(selected));
                            } })));
            }));
        }
        else {
            return [];
        }
    }
}
exports.selector = function (type, to_string, key, dbg) {
    return (items, selected_item) => core_1.make_C(ctxt => cont => React.createElement(Selector, { kind: "selector", debug_info: dbg, items: Immutable.List(items), selected_item: selected_item, type: type, to_string: to_string, context: ctxt, cont: cont, key: key }));
};
class MultiSelector extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = { selected: Immutable.Set(props.selected_items != undefined ?
                props.items.map((i, i_index) => [props.to_string(i), i_index])
                    .filter(x => props.selected_items.some(selected => props.to_string(selected) == x[0]))
                    .map(x => x[1])
                    .toArray()
                :
                    []) };
    }
    componentWillMount() {
        if (this.props.selected_items != undefined)
            this.props.cont(() => null)(this.state.selected.map(index => this.props.items.get(index)).toArray());
    }
    render() {
        if (this.props.type == "list") {
            return React.createElement("select", { value: this.state.selected.map(index => index.toString()).toArray(), multiple: true, onChange: e => {
                    let options = e.currentTarget.options;
                    let selection = Immutable.Set();
                    for (var i = 0, l = options.length; i < l; i++) {
                        if (options[i].selected) {
                            let index = parseInt(options[i].value);
                            selection = selection.add(index);
                        }
                    }
                    this.setState(Object.assign({}, this.state, { selected: selection }), () => this.props.cont(() => { })(selection.map(index => this.props.items.get(index)).toArray()));
                } }, this.props.items.map((i, i_index) => {
                let i_s = this.props.to_string(i);
                return React.createElement("option", { key: i_s, value: i_index }, i_s);
            }));
        }
        else if (this.props.type == "checkbox") {
            return React.createElement("form", null, this.props.items.map((i, i_index) => {
                let i_s = this.props.to_string(i);
                return React.createElement("div", { key: i_s },
                    React.createElement("label", null,
                        React.createElement("input", { key: i_s, type: "checkbox", checked: this.state.selected.has(i_index), className: "monadic-input-choices monadic-input-choices--checkbox", onChange: e => {
                                let selected = this.props.items.get(i_index);
                                let selection = e.currentTarget.checked ? this.state.selected.add(i_index) : this.state.selected.remove(i_index);
                                this.setState(Object.assign({}, this.state, { selected: selection }), () => this.props.cont(() => { })(selection.map(index => this.props.items.get(index)).toArray()));
                            } }),
                        React.createElement("span", null, i_s)));
            }));
        }
        else {
            return null;
        }
    }
}
exports.multi_selector = function (type, to_string, key, dbg) {
    return (items, selected_items) => core_1.make_C(ctxt => (cont) => React.createElement(MultiSelector, { kind: "multi selector",
        debug_info: dbg,
        items: Immutable.List(items),
        selected_items: selected_items ? Immutable.List(selected_items) : Immutable.List(),
        type: type,
        to_string: to_string,
        cont: cont,
        context: ctxt,
        key: key }));
};
class Image extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = { src: props.src };
    }
    componentWillReceiveProps(new_props) {
        if (new_props.src != this.state.src)
            this.setState(Object.assign({}, this.state, { src: new_props.src }));
    }
    render() {
        return React.createElement("div", null,
            React.createElement("img", { src: this.state.src }),
            this.props.mode == "edit" ?
                React.createElement("div", { className: "image-controls" },
                    React.createElement("a", { className: "user button button--delete", onClick: () => {
                            if (confirm('Are you sure?')) {
                                let new_value = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAMSURBVBhXY/j//z8ABf4C/qc1gYQAAAAASUVORK5CYII=";
                                this.setState(Object.assign({}, this.state, { src: new_value }), () => this.props.cont(() => null)(new_value));
                            }
                        } }),
                    React.createElement("input", { type: "file", accept: "image/*", onChange: (e) => {
                            let files = e.target.files;
                            let file_reader = new FileReader();
                            file_reader.onload = ((e) => {
                                let new_value = file_reader.result;
                                this.setState(Object.assign({}, this.state, { src: new_value }), () => this.props.cont(() => null)(new_value));
                            });
                            file_reader.readAsDataURL(files[0]);
                        } }))
                :
                    []);
    }
}
exports.image = (mode, key, dbg) => function (src) {
    return core_1.make_C(ctxt => cont => React.createElement(Image, { kind: "image", debug_info: dbg, mode: mode, src: src, context: ctxt, cont: cont, key: key }));
};
class Button extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = { x: props.x };
    }
    componentWillReceiveProps(new_props) {
        this.setState(Object.assign({}, this.state, { x: new_props.x }));
    }
    render() {
        return this.props.kind == "a" ?
            React.createElement("a", { href: this.props.href, rel: this.props.rel || "", className: `${this.props.className ? this.props.className : ""}${this.props.disabled ? " disabled" : ""}`, onClick: e => {
                    this.props.cont(() => { })(this.state.x);
                    e.preventDefault();
                    return false;
                } }, this.props.label)
            :
                React.createElement("button", { type: "button", className: `button ${this.props.className ? this.props.className : ""}`, disabled: this.props.disabled, onClick: () => this.props.cont(() => { })(this.state.x) }, this.props.label);
    }
}
exports.a = function (label, href, rel, disabled, key, className, dbg) {
    return x => core_1.make_C(ctxt => cont => React.createElement(Button, { kind: "a", debug_info: dbg, label: label, href: href || "#", rel: rel, disabled: !!disabled, x: x, context: ctxt, cont: cont, key: key, className: className }));
};
exports.button = function (label, disabled, key, className, dbg) {
    return x => core_1.make_C(ctxt => cont => React.createElement(Button, { kind: "button", debug_info: dbg, label: label, disabled: !!disabled, x: x, context: ctxt, cont: cont, key: key, className: className }));
};
class Link extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {};
    }
    render() {
        return React.createElement("a", { href: this.props.url, className: `${this.props.className || ""} ${this.props.disabled ? "disabled" : ""}` }, this.props.label);
    }
}
exports.link = function (label, url, disabled, key, className, dbg) {
    return core_1.make_C(ctxt => cont => React.createElement(Link, { kind: "link", debug_info: dbg, label: label, url: url, disabled: !!disabled, context: ctxt, cont: cont, key: key, className: className }));
};
class FileComponent extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {};
    }
    render() {
        return React.createElement("div", null,
            React.createElement("span", null,
                React.createElement("a", { href: this.props.url }, this.props.label)),
            this.props.mode == "view"
                ? []
                : React.createElement("input", { disabled: this.props.disabled, type: "file", onChange: (e) => {
                        let files = e.target.files;
                        let f = files[0];
                        this.props.cont(() => { })(f);
                    } }));
    }
}
exports.file = function (mode, label, url, disabled, key, dbg) {
    return core_1.make_C(ctxt => cont => React.createElement(FileComponent, { kind: "file", mode: mode, debug_info: dbg, label: label, url: url, disabled: !!disabled, context: ctxt, cont: cont, key: key }));
};
//# sourceMappingURL=html.js.map