var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
import { Component, ElementRef, EventEmitter, HostBinding, Input, Optional, Output, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
import { NgControl } from '@angular/forms';
import { Config } from '../../config/config';
import { Ion } from '../ion';
import { isPresent } from '../../util/util';
import { Debouncer } from '../../util/debouncer';
export var Searchbar = (function (_super) {
    __extends(Searchbar, _super);
    function Searchbar(config, elementRef, renderer, ngControl) {
        _super.call(this, config, elementRef, renderer);
        this._value = '';
        this._shouldBlur = true;
        this._isActive = false;
        this._debouncer = new Debouncer(250);
        this.cancelButtonText = 'Cancel';
        this.showCancelButton = false;
        this.placeholder = 'Search';
        this.type = 'search';
        this.ionInput = new EventEmitter();
        this.ionBlur = new EventEmitter();
        this.ionFocus = new EventEmitter();
        this.ionCancel = new EventEmitter();
        this.ionClear = new EventEmitter();
        this.onChange = function (_) { };
        this.onTouched = function () { };
        this.mode = config.get('mode');
        if (ngControl) {
            ngControl.valueAccessor = this;
        }
    }
    Object.defineProperty(Searchbar.prototype, "color", {
        set: function (val) {
            this._setColor('searchbar', val);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Searchbar.prototype, "mode", {
        set: function (val) {
            this._setMode('searchbar', val);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Searchbar.prototype, "debounce", {
        get: function () {
            return this._debouncer.wait;
        },
        set: function (val) {
            this._debouncer.wait = val;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Searchbar.prototype, "searchbarInput", {
        set: function (searchbarInput) {
            this._searchbarInput = searchbarInput;
            var inputEle = searchbarInput.nativeElement;
            var autoComplete = (this.autocomplete === '' || this.autocomplete === 'on') ? 'on' : this._config.get('autocomplete', 'off');
            inputEle.setAttribute('autocomplete', autoComplete);
            var autoCorrect = (this.autocorrect === '' || this.autocorrect === 'on') ? 'on' : this._config.get('autocorrect', 'off');
            inputEle.setAttribute('autocorrect', autoCorrect);
            var spellCheck = (this.spellcheck === '' || this.spellcheck === 'true' || this.spellcheck === true) ? true : this._config.getBoolean('spellcheck', false);
            inputEle.setAttribute('spellcheck', spellCheck);
            inputEle.setAttribute('type', this.type);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Searchbar.prototype, "value", {
        get: function () {
            return this._value;
        },
        set: function (val) {
            this._value = val;
        },
        enumerable: true,
        configurable: true
    });
    Searchbar.prototype.ngOnInit = function () {
        var showCancelButton = this.showCancelButton;
        if (typeof showCancelButton === 'string') {
            this.showCancelButton = (showCancelButton === '' || showCancelButton === 'true');
        }
    };
    Searchbar.prototype.ngAfterViewInit = function () {
        this.positionElements();
    };
    Searchbar.prototype.positionElements = function () {
        if (this._config.get('mode') !== 'ios')
            return;
        if (this._searchbarInput && this._searchbarIcon) {
            this.positionInputPlaceholder(this._searchbarInput.nativeElement, this._searchbarIcon.nativeElement);
        }
        if (this._cancelButton && this._cancelButton.nativeElement) {
            this.positionCancelButton(this._cancelButton.nativeElement);
        }
    };
    Searchbar.prototype.positionInputPlaceholder = function (inputEle, iconEle) {
        if (this.shouldAlignLeft()) {
            inputEle.removeAttribute('style');
            iconEle.removeAttribute('style');
        }
        else {
            var tempSpan = document.createElement('span');
            tempSpan.innerHTML = this.placeholder;
            document.body.appendChild(tempSpan);
            var textWidth = tempSpan.offsetWidth;
            tempSpan.remove();
            var inputLeft = 'calc(50% - ' + (textWidth / 2) + 'px)';
            inputEle.style.paddingLeft = inputLeft;
            var iconLeft = 'calc(50% - ' + ((textWidth / 2) + 30) + 'px)';
            iconEle.style.marginLeft = iconLeft;
        }
    };
    Searchbar.prototype.positionCancelButton = function (cancelButtonEle) {
        if (cancelButtonEle.offsetWidth > 0) {
            if (this._sbHasFocus) {
                cancelButtonEle.style.marginRight = '0';
            }
            else {
                cancelButtonEle.style.marginRight = -cancelButtonEle.offsetWidth + 'px';
            }
        }
    };
    Searchbar.prototype.shouldAlignLeft = function () {
        return ((this._value && this._value.toString().trim() !== '') || this._sbHasFocus === true);
    };
    Searchbar.prototype.inputChanged = function (ev) {
        var _this = this;
        var value = ev.target.value;
        this._debouncer.debounce(function () {
            _this._value = value;
            _this.onChange(_this._value);
            _this.ionInput.emit(ev);
        });
    };
    Searchbar.prototype.inputFocused = function (ev) {
        this.ionFocus.emit(ev);
        this._sbHasFocus = true;
        this._isActive = true;
        this.positionElements();
    };
    Searchbar.prototype.inputBlurred = function (ev) {
        if (this._shouldBlur === false) {
            this._searchbarInput.nativeElement.focus();
            this._shouldBlur = true;
            return;
        }
        this.ionBlur.emit(ev);
        this._sbHasFocus = false;
        this.positionElements();
    };
    Searchbar.prototype.clearInput = function (ev) {
        this.ionClear.emit(ev);
        if (isPresent(this._value) && this._value !== '') {
            this._value = '';
            this.onChange(this._value);
            this.ionInput.emit(ev);
        }
        this._shouldBlur = false;
    };
    Searchbar.prototype.cancelSearchbar = function (ev) {
        this.ionCancel.emit(ev);
        this.clearInput(ev);
        this._shouldBlur = true;
        this._isActive = false;
    };
    Searchbar.prototype.writeValue = function (val) {
        this._value = val;
        this.positionElements();
    };
    Searchbar.prototype.registerOnChange = function (fn) {
        this.onChange = fn;
    };
    Searchbar.prototype.registerOnTouched = function (fn) {
        this.onTouched = fn;
    };
    Searchbar.decorators = [
        { type: Component, args: [{
                    selector: 'ion-searchbar',
                    template: '<div class="searchbar-input-container">' +
                        '<button ion-button (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" clear color="dark" class="searchbar-md-cancel">' +
                        '<ion-icon name="arrow-back"></ion-icon>' +
                        '</button>' +
                        '<div #searchbarIcon class="searchbar-search-icon"></div>' +
                        '<input #searchbarInput [(ngModel)]="_value" [attr.placeholder]="placeholder" (input)="inputChanged($event)" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" class="searchbar-input">' +
                        '<button ion-button clear class="searchbar-clear-icon" (click)="clearInput($event)" (mousedown)="clearInput($event)"></button>' +
                        '</div>' +
                        '<button ion-button #cancelButton [tabindex]="_isActive ? 1 : -1" clear (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" class="searchbar-ios-cancel">{{cancelButtonText}}</button>',
                    host: {
                        '[class.searchbar-has-value]': '_value',
                        '[class.searchbar-active]': '_isActive',
                        '[class.searchbar-show-cancel]': 'showCancelButton',
                        '[class.searchbar-left-aligned]': 'shouldAlignLeft()'
                    },
                    encapsulation: ViewEncapsulation.None
                },] },
    ];
    Searchbar.ctorParameters = [
        { type: Config, },
        { type: ElementRef, },
        { type: Renderer, },
        { type: NgControl, decorators: [{ type: Optional },] },
    ];
    Searchbar.propDecorators = {
        'color': [{ type: Input },],
        'mode': [{ type: Input },],
        'cancelButtonText': [{ type: Input },],
        'showCancelButton': [{ type: Input },],
        'debounce': [{ type: Input },],
        'placeholder': [{ type: Input },],
        'autocomplete': [{ type: Input },],
        'autocorrect': [{ type: Input },],
        'spellcheck': [{ type: Input },],
        'type': [{ type: Input },],
        'ionInput': [{ type: Output },],
        'ionBlur': [{ type: Output },],
        'ionFocus': [{ type: Output },],
        'ionCancel': [{ type: Output },],
        'ionClear': [{ type: Output },],
        '_sbHasFocus': [{ type: HostBinding, args: ['class.searchbar-has-focus',] },],
        'searchbarInput': [{ type: ViewChild, args: ['searchbarInput',] },],
        '_searchbarIcon': [{ type: ViewChild, args: ['searchbarIcon',] },],
        '_cancelButton': [{ type: ViewChild, args: ['cancelButton', { read: ElementRef },] },],
        'value': [{ type: Input },],
    };
    return Searchbar;
}(Ion));
