/**
 * R3.Video
 * @param apiComponent
 *
 * @property autoUpdateSize
 * @property width
 * @property height
 * @property offset
 * @property source
 *
 * @constructor
 */
R3.Video = function(
    apiComponent
) {
    __RUNTIME_COMPONENT__;

    __UPGRADE_TO_RUNTIME__;
};

R3.Video.prototype = Object.create(R3.Component.prototype);
R3.Video.prototype.constructor = R3.Video;

/**
 * Creates a light instance
 * @returns {*}
 */
R3.Video.prototype.createInstance = function() {

    this.instance = document.createElement('video');

    this.instance.setAttribute('id', this.id);

    this.instance.setAttribute('width', this.width);

    this.instance.setAttribute('height', this.height);

    this.instance.setAttribute('style', 'left: ' + this.offset.x + 'px;top: ' + this.offset.y + 'px');

    this.instance.setAttribute('loop', '');

    this.instance.setAttribute('controls', '');

    this.instance.setAttribute('autoplay', '');

    this.instance.setAttribute('webkit-playsinline', '');

    if (this.autoUpdateSize) {
        /**
         * Update our size from the instance size
         */
        this.width  = this.instance.width;
        this.height = this.instance.height;
    } else {
        /**
         * Update our instance with our size
         */
        this.instance.width     = this.width;
        this.instance.height    = this.height;
    }

    if (this.source) {
        this.instance.setAttribute('src', this.source);
    }

    __CREATE_INSTANCE__;

};

/**
 * Updates the instance with the current state
 */
R3.Video.prototype.updateInstance = function(property) {

    if (property === 'id') {
        this.instance.setAttribute('id', this.id);
        return;
    }

    if (property === 'offset') {
        this.instance.style.left    = this.offset.x + 'px';
        this.instance.style.top     = this.offset.y + 'px';
        return;
    }

    if (
        property === 'autoUpdateSize' ||
        property === 'width' ||
        property === 'height'
    ) {
        /**
         * We cannot control everything about the canvas - this is dependent on where the canvas lives and its
         * dimensions can also be controlled via CSS -
         *
         * This means - autoUpdateSize works a little different for this component - instead of getting our size and
         * applying it, it gets our canvas size and applies it, or applies our size to the canvas - of course
         * the user settings override this.
         */
        if (this.autoUpdateSize) {

            /**
             * Update from our canvas size
             */
            this.width  = this.instance.width;
            this.height = this.instance.height;

        } else {

            /**
             * Command our canvas to take a size - this is not guaranteed however - CSS wins
             */
            this.instance.width = this.width;
            this.instance.height = this.height;
        }
        return;
    }

    if (property === 'source') {
        this.instance.src = this.source;
        return;
    }

    __UPDATE_INSTANCE__;
};