import ngModule from '../../module';
import Component from 'core/lib/component';
import './style.scss';

/**
 * Displays colored avatar based on value.
 *
 * @property {*} val The value
 */
export default class Avatar extends Component {
    get val() {
        return this._val;
    }

    set val(value) {
        this._val = value;

        const val = value || '';
        let hash = 0;
        for (let i = 0; i < val.length; i++)
            hash += val.charCodeAt(i);
        const color = '#' + colors[hash % colors.length];

        const el = this.element;
        el.style.backgroundColor = color;
        el.title = val;
    }
}

ngModule.vnComponent('vnAvatar', {
    template: require('./index.html'),
    controller: Avatar,
    bindings: {
        val: '@?'
    },
    transclude: true
});

const colors = [
    'e2553d', // Coral
    'FFA07A', // Salmon
    'FFDAB9', // Peach
    'a17077', // Pink
    'bf0e99', // Pink light
    '52a500', // Green chartreuse
    '00aeae', // Cian
    'b754cf', // Purple middle
    '8a69cd', // Blue lavender
    '1fa8a1', // Green ocean
    'DC143C', // Red crimson
    '5681cf', // Blue steel
    'FF1493', // Ping intense
    '02ba02', // Green lime
    '1E90FF', // Blue sky
    '8B008B', // Purple dark
    'cc7000', // Orange bright
    '00b5b8', // Turquoise
    '8B0000', // Red dark
    '008080', // Green bluish
    '2F4F4F', // Gray board
    '7e7e7e', // Gray
    '5d5d5d', // Gray dark
];