import * as tslib_1 from "tslib";
import WidgetBase from '@dojo/framework/core/WidgetBase';
import { v, w } from '@dojo/framework/core/vdom';
import { FocusMixin } from '@dojo/framework/core/mixins/Focus';
import I18nMixin from '@dojo/framework/core/mixins/I18n';
import ThemedMixin, { theme } from '@dojo/framework/core/mixins/Themed';
import { uuid } from '@dojo/framework/core/util';
import { Keys } from '../common/util';
import TextInput from '../text-input/index';
import Button from '../button/index';
import Icon from '../icon/index';
import bundle from './nls/Grid';
import * as fixedCss from './styles/cell.m.css';
import * as css from '../theme/default/grid-cell.m.css';
let Cell = class Cell extends I18nMixin(ThemedMixin(FocusMixin(WidgetBase))) {
    constructor() {
        super(...arguments);
        this._editing = false;
        this._editingValue = '';
        this._idBase = uuid();
        this._onEdit = () => {
            const { editable } = this.properties;
            if (editable) {
                this._editing = true;
                this._callFocus('input');
                this._editingValue = this.properties.rawValue;
                this.invalidate();
            }
        };
    }
    _callFocus(key) {
        this._focusKey = key;
        this.focus();
    }
    _onBlur() {
        if (this._editing) {
            this._onSave();
        }
    }
    _onInput(value) {
        this._editingValue = value;
    }
    _onKeyDown(key) {
        if (key === Keys.Enter) {
            this._onSave();
            this._callFocus('button');
        }
        else if (key === Keys.Escape) {
            this._editing = false;
            this._callFocus('button');
            this.invalidate();
        }
    }
    _onSave() {
        this._editing = false;
        this.properties.updater(this._editingValue);
        this.invalidate();
    }
    renderContent() {
        const { value } = this.properties;
        return v('div', {
            key: 'content',
            id: this._idBase,
            ondblclick: this._onEdit
        }, [value]);
    }
    render() {
        let { editable, rawValue, theme, classes, width } = this.properties;
        const { format, messages } = this.localizeBundle(bundle);
        const passedInputClasses = (classes && classes['@dojo/widgets/text-input']) || {};
        const passedButtonClasses = (classes && classes['@dojo/widgets/button']) || {};
        return v('div', {
            role: 'cell',
            styles: width
                ? {
                    flex: `0 1 ${width}px`
                }
                : {},
            classes: [this.theme(css.root), fixedCss.rootFixed]
        }, [
            this._editing
                ? w(TextInput, {
                    key: 'input',
                    theme,
                    classes: Object.assign({}, classes, { '@dojo/widgets/text-input': Object.assign({ input: [this.theme(css.input)] }, passedInputClasses) }),
                    labelHidden: true,
                    focus: this._focusKey === 'input' ? this.shouldFocus : () => false,
                    initialValue: this._editingValue,
                    onValue: this._onInput,
                    onBlur: this._onBlur,
                    onKeyDown: this._onKeyDown
                }, [{ label: format('editValue', { value: rawValue }) }])
                : this.renderContent(),
            editable && !this._editing
                ? w(Button, {
                    key: 'button',
                    theme,
                    classes: Object.assign({}, classes, { '@dojo/widgets/button': Object.assign({ root: [this.theme(css.edit)] }, passedButtonClasses) }),
                    aria: { describedby: this._idBase },
                    focus: this._focusKey === 'button' ? this.shouldFocus : () => false,
                    type: 'button',
                    onClick: this._onEdit
                }, [w(Icon, { type: 'editIcon', altText: messages.edit, classes, theme })])
                : null
        ]);
    }
};
Cell = tslib_1.__decorate([
    theme(css)
], Cell);
export default Cell;

/*# sourceMappingURL=Cell.mjs.map*/