import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';

import { GuiCellView, GuiColumn, GuiColumnMenu, GuiDataType, GuiPaging, GuiPagingDisplay, GuiRowColoring } from '@generic-ui/ngx-grid';

@Component({
	template: './component.html',
	styles: ['./component.scss'],
	changeDetection: ChangeDetectionStrategy.OnPush,
	encapsulation: ViewEncapsulation.None
})
export class UsersGridComponent implements OnInit {

	coloring = GuiRowColoring.ODD;

	source: Array<any> = [];

	columns: Array<GuiColumn> = [
		{
			field: (item) => item,
			header: 'Name',
			type: GuiDataType.STRING,
			view: (cellValue: any) => {
				let template = `
					<span class="gui-user-wrapper">
						<img src="${cellValue.avatar}" class="gui-user-img" />
					</span>
					
					<div class="gui-user-info" >
						<span class="gui-user-info-name" >${cellValue.name}</span>
						<span class="gui-user-info-position" >${cellValue.position}</span>
		
					</div>
				`;

				return template;
			},
			width: 210,
			sorting: {
				enabled: true
			},
			cellEditing: {
				enabled: false
			},
			matcher: (item) => item.name
		}, {
			field: 'company',
			header: 'Company',
			type: GuiDataType.STRING,
			view: GuiCellView.TEXT,
			cellEditing: {
				enabled: true
			}
		}, {
			field: 'country',
			header: 'Country',
			type: GuiDataType.STRING,
			view: (country: any) => {
				return `<span style="margin-right: 4px">${country.flag}</span><span>${country.name.common}</span>`;
			},
			sorting: {
				enabled: true
			},
			cellEditing: {
				enabled: false
			},
			matcher: (item) => item.name.common
		}, {
			field: 'mobile',
			header: 'Mobile',
			type: GuiDataType.STRING,
			view: GuiCellView.ITALIC,
			cellEditing: {
				enabled: true
			}
		}, {
			field: 'team',
			header: 'Team',
			type: GuiDataType.STRING,
			view: (cellValue: any) => {
				return `<div class="gui-team" style="background: ${cellValue.color}">
							${cellValue.short}
				</div>`;
			},
			width: 80,
			cellEditing: {
				enabled: false
			},
			matcher: (item) => item.short
		}, {
			field: 'training',
			header: 'Training',
			type: GuiDataType.NUMBER,
			width: 140,
			view: GuiCellView.BAR,
			},
			cellEditing: {
				enabled: true
			}
		}, {
			'budget',
			header: 'Budget',
			type: GuiDataType.STRING,
			view: (cellValue: number) => {

				if (cellValue > 0) {
					return `<div class="gui-align-right gui-budget" style="color: rgb(86, 174, 71)">$ ${cellValue}.00</div>`;
				} else if (cellValue === 0) {
					return `<div class="gui-align-right gui-budget" style="color: #0747a6">$ ${cellValue}.00</div>`;
				} else {
					return `<div class="gui-align-right gui-budget" style="color: #ef4920">$ ${cellValue}.00</div>`;
				}
			},
			cellEditing: {
				false
			},
			100
		}]

	sorting = {
		enabled: true,
		multiSorting: true
	};

	GuiColumnMenu = {
		enabled: true,
		columnsManager: true
	};

	GuiPaging = {
		enabled: true,
		page: 1,
		pageSize: 10,
		pageSizes: [5, 10, 25, 50],
		display: GuiPagingDisplay.ADVANCED
	};

	ngOnInit() {
		this.source = users;
	}

}