var self = this;

var time = new Date();
self.field = `${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}.${time.getMilliseconds()}`;

var defaultMessages = {
    "addToSelection": "Add to selection",
    "viewPage": "View page"
};

self.messages = $.extend({}, defaultMessages, options.messages || {});

self.entity = options.innerEntity;

// thumbnail
self.defaultIcon = 'm-icon-image';
self.colorClass = ko.observable('color-light-gray');
self.noImage = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
self.image = ko.observable();
self.renditionAvailable = ko.observable(true);

self.getThumbnail = ko.computed(() => {
    const entity = ko.unwrap(self.entity);
    if (!entity) return;

    const renditions = entity.data.renditions;
    if (renditions.thumbnail) {
        self.image(renditions.thumbnail[0].href);
        self.colorClass('');
        self.renditionAvailable(true);
    } else {
        self.image(self.noImage);
        self.colorClass('color-light-gray');
        self.renditionAvailable(false);
    }
});

// fields
self.entityId = ko.unwrap(self.entity().systemProperties.id);
self.title = ko.unwrap(self.entity().properties["Title"]);

self.layoutClasses = ko.computed(function () {
    let layoutClasses = "thumbnail--asset";
    const selectedClass = 'm-item-selected';

    const selected = ko.unwrap(self.selected);
    if (selected) {
        layoutClasses += ' ' + selectedClass;
    }

    return layoutClasses;
});

self.iconClasses = {
    active: "m-icon m-icon-checkbox-on",
    inactive: "m-icon m-icon-checkbox"
};

self.buttonClasses = {
    active: "btn-link",
    inactive: "btn-light"
};

self.checkboxTooltip = ko.computed(function () {
    return ko.unwrap(self.selected) ? self.messages.removeFromSelection : self.messages.addToSelection;
});

self.checkboxBtnCss = ko.computed(function () {
    var selected = ko.unwrap(self.selected);
    if (selected == true) {
        return self.buttonClasses.active;
    }
    else {
        return self.buttonClasses.inactive;
    }
});

self.checkboxIconCss = ko.computed(function () {
    var selected = ko.unwrap(self.selected);
    if (selected == true) {
        return self.iconClasses.active;
    }
    else {
        return self.iconClasses.inactive;
    }
});



// Main click operation
self.click = function (data, event) {
    var entity = ko.unwrap(self.entity);
    if (!entity) return;

    var url = Utils.format("/pages/{uiCulture}/AssetDetail/{entityId}", {
        entityId: self.entityId
    });
    window.location = url;
};