declare var require;

const React = require("react");
const {Box, Item, Dialog} = require("react-polymer-layout");

export = React.createClass({
    propTypes: {
        color: React.PropTypes.string,
        type: React.PropTypes.string,
        text: React.PropTypes.string,
        cancelText: React.PropTypes.string,
        confirmText: React.PropTypes.string,
        style: React.PropTypes.object,
        className: React.PropTypes.object,
        onSubmit: React.PropTypes.func,
    },

    getDefaultProps() {
        return { className: "react-lean-alert" };
    },

    getInitialState() {
        return { submitted: false };
    },

    show() {
        this.setState({submitted: false});
        this.refs.dialog.show();
    },

    hide() {
        this.refs.dialog.hide();
    },

    _mark(mark: string, color: string) {
        switch (mark) {
            case "!":
            case "?":
            case "x":
                return (
                    <div className="react-lean-alert-mark"
                        style={{color: color, lineHeight: "48px", textAlign: "center",
                        fontSize: mark === "x" ? 46 : 28, textShadow: "none !important"}}>
                        {mark === "x" ? "×" : mark}
                    </div>
                );
            case "v":
                return (
                    <div className="react-lean-alert-mark-v"
                        style={{border: `2px solid ${color}`, borderTop: "none",
                        borderLeft: "none", width: 12, height: 24, marginTop: 8,
                        marginLeft: 17, transform: "rotate(45deg)"}} />
                );
        }
    },

    _handleSubmit(e) {
        this.setState({submitted: true});
        if (this.props.onSubmit) this.props.onSubmit(e);
    },

    render() {
        let props = this.props;
        let color:string = props.color;
        switch (color) {
            case "RED":   color = "#e3757f"; break;
            case "GREEN": color = "#83ce35"; break;
            case "BLUE":  color = "#009cff"; break;
        }

        let dialogStyle = {
            width: 420,
            color: "#333",
            padding: 0,
            borderRadius: 2,
            overflow: "hidden",
        };

        for (let k in props.style) dialogStyle[k] = props.style[k];

        return (
            <Dialog ref="dialog" style={dialogStyle} className={props.className}>
                <Box center style={{minHeight: 160}}>
                    <div style={{width: 100}}>
                        <div style={{width: 50, height: 50, borderRadius: 25, marginLeft: 40,
                            border: `2px solid ${color}`, boxSizing: "border-box"}}>
                            {this._mark(props.type, color)}
                        </div>
                    </div>
                    <Item flex style={{padding: 20, fontSize: "1.1rem"}}>
                        {props.text}
                    </Item>
                </Box>

                <Box>
                    {props.cancelText && (
                        <Item flex style={{padding: 12, textAlign: "center", cursor: "pointer",
                            background: "#f7f7f7", fontSize: "1rem"}}
                            onClick={_ => this.hide()}>
                            {props.cancelText}
                        </Item>
                    )}

                    <Item flex style={{padding: 12, textAlign: "center", cursor: "pointer",
                        background: this.state.submitted ? "#ccc": color, color: "#fff", fontSize: "1rem"}}
                        onClick={this.state.submitted ? undefined : this._handleSubmit}>
                        {props.confirmText}
                    </Item>
                </Box>
            </Dialog>
        );
    }
})