import { ChangeDetectionStrategy, Component, ElementRef, Input, NgZone, Optional, Renderer, ViewEncapsulation } from '@angular/core';
import { Content } from '../content/content';
import { DomController } from '../../util/dom-controller';
import { ImgLoader } from './img-loader';
import { isPresent, isTrueProperty } from '../../util/util';
import { Platform } from '../../platform/platform';
export class Img {
    constructor(_ldr, _elementRef, _renderer, _platform, _zone, _content, _dom) {
        this._ldr = _ldr;
        this._elementRef = _elementRef;
        this._renderer = _renderer;
        this._platform = _platform;
        this._zone = _zone;
        this._content = _content;
        this._dom = _dom;
        this._cache = true;
        this._w = '';
        this._h = '';
        this._wQ = '';
        this._hQ = '';
        this.alt = '';
        if (!this._content) {
            console.warn(`ion-img can only be used within an ion-content`);
        }
        else {
            this._content.addImg(this);
        }
        this._isLoaded(false);
    }
    get src() {
        return this._src;
    }
    set src(newSrc) {
        if (newSrc !== this._src) {
            this.reset();
            this._src = newSrc;
            this._tmpDataUri = null;
            this.update();
        }
    }
    reset() {
        if (this._requestingSrc) {
            (void 0);
            this._ldr.abort(this._requestingSrc);
            this._requestingSrc = null;
        }
        if (this._renderedSrc) {
            (void 0);
            this._renderedSrc = null;
            this._isLoaded(false);
        }
    }
    update() {
        if (this._src && this._content.isImgsUpdatable()) {
            if (this.canRequest && (this._src !== this._renderedSrc && this._src !== this._requestingSrc) && !this._tmpDataUri) {
                (void 0);
                this._requestingSrc = this._src;
                this._cb = (msg) => {
                    this._loadResponse(msg);
                };
                this._ldr.load(this._src, this._cache, this._cb);
                this._setDims();
            }
            if (this.canRender && this._tmpDataUri && this._src !== this._renderedSrc) {
                this._renderedSrc = this._src;
                this._setDims();
                this._dom.write(() => {
                    if (this._tmpDataUri) {
                        (void 0);
                        this._isLoaded(true);
                        this._srcAttr(this._tmpDataUri);
                        this._tmpDataUri = null;
                    }
                });
            }
        }
    }
    _loadResponse(msg) {
        this._requestingSrc = null;
        if (msg.status === 200) {
            this._tmpDataUri = msg.data;
            this.update();
        }
        else {
            console.error(`img, status: ${msg.status} ${msg.msg}`);
            this._renderedSrc = this._tmpDataUri = null;
            this._dom.write(() => {
                this._isLoaded(false);
            });
        }
    }
    _isLoaded(isLoaded) {
        const renderer = this._renderer;
        const ele = this._elementRef.nativeElement;
        renderer.setElementClass(ele, 'img-loaded', isLoaded);
        renderer.setElementClass(ele, 'img-unloaded', !isLoaded);
    }
    _srcAttr(srcAttr) {
        const imgEle = this._elementRef.nativeElement.firstChild;
        const renderer = this._renderer;
        renderer.setElementAttribute(imgEle, 'src', srcAttr);
        renderer.setElementAttribute(imgEle, 'alt', this.alt);
    }
    get top() {
        const bounds = this._getBounds();
        return bounds && bounds.top || 0;
    }
    get bottom() {
        const bounds = this._getBounds();
        return bounds && bounds.bottom || 0;
    }
    _getBounds() {
        if (this._bounds) {
            return this._bounds;
        }
        if (!this._rect) {
            this._rect = this._elementRef.nativeElement.getBoundingClientRect();
            (void 0);
        }
        return this._rect;
    }
    set bounds(b) {
        if (isPresent(b)) {
            this._bounds = b;
        }
    }
    get cache() {
        return this._cache;
    }
    set cache(val) {
        this._cache = isTrueProperty(val);
    }
    set width(val) {
        this._wQ = getUnitValue(val);
        this._setDims();
    }
    set height(val) {
        this._hQ = getUnitValue(val);
        this._setDims();
    }
    _setDims() {
        if (this.canRender && (this._w !== this._wQ || this._h !== this._hQ)) {
            var wrapperEle = this._elementRef.nativeElement;
            var renderer = this._renderer;
            this._dom.write(() => {
                if (this._w !== this._wQ) {
                    this._w = this._wQ;
                    renderer.setElementStyle(wrapperEle, 'width', this._w);
                }
                if (this._h !== this._hQ) {
                    this._h = this._hQ;
                    renderer.setElementStyle(wrapperEle, 'height', this._h);
                }
            });
        }
    }
    ngOnDestroy() {
        this._ldr.cancelLoad(this._cb);
        this._cb = null;
        this._content && this._content.removeImg(this);
    }
}
Img.decorators = [
    { type: Component, args: [{
                selector: 'ion-img',
                template: '<img>',
                changeDetection: ChangeDetectionStrategy.OnPush,
                encapsulation: ViewEncapsulation.None,
            },] },
];
Img.ctorParameters = [
    { type: ImgLoader, },
    { type: ElementRef, },
    { type: Renderer, },
    { type: Platform, },
    { type: NgZone, },
    { type: Content, decorators: [{ type: Optional },] },
    { type: DomController, },
];
Img.propDecorators = {
    'src': [{ type: Input },],
    'bounds': [{ type: Input },],
    'cache': [{ type: Input },],
    'width': [{ type: Input },],
    'height': [{ type: Input },],
    'alt': [{ type: Input },],
};
function getUnitValue(val) {
    if (isPresent(val)) {
        if (typeof val === 'string') {
            if (val.indexOf('%') > -1 || val.indexOf('px') > -1) {
                return val;
            }
            if (val.length) {
                return val + 'px';
            }
        }
        else if (typeof val === 'number') {
            return val + 'px';
        }
    }
    return '';
}
//# sourceMappingURL=img.js.map