import '@things-factory/grist-ui'

import {
  css,
  html,
  LitElement
} from 'lit-element'

import {
  i18next,
  localize
} from '@things-factory/i18n-base'
import { ScrollbarStyles } from '@things-factory/styles'
import { isMobileDevice } from '@things-factory/utils'

export class VasChangesPopup extends localize(i18next)(LitElement) {
	static get styles() {
		return [
			ScrollbarStyles,
			css`
				:host {
					display: flex;
					flex-direction: column;
					overflow: hidden;
					background-color: white;
				}
				.grist-container {
					display: flex;
					flex: 1;
					margin: 10px;
				}
				.grist {
					display: flex;
					flex-direction: column;
					flex: 1;
					overflow-y: auto;
				}
				.grist h2 mwc-icon {
					vertical-align: middle;
					margin: var(--grist-title-icon-margin);
					font-size: var(--grist-title-icon-size);
					color: var(--grist-title-icon-color);
				}
				data-grist {
					overflow-y: hidden;
					flex: 1;
				}
				h2 {
					padding: var(--subtitle-padding);
					font: var(--subtitle-font);
					color: var(--subtitle-text-color);
					border-bottom: var(--subtitle-border-bottom);
				}
				.grist h2 {
					font: var(--grist-title-font);
				}
				.button-container {
					padding: var(--button-container-padding);
					margin: var(--button-container-margin);
					text-align: var(--button-container-align);
					background-color: var(--button-container-background);
					height: var(--button-container-height);
				}
				[danger] {
					--mdc-theme-primary: var(--mdc-danger-button-primary-color);
				}
			`
		]
  }

	static get properties() {
		return{
			config: Object,
			data: Object
		}
	}

	render() {
		return html`
			<div class="grist-container">
				<div class="grist">
					<h2><mwc-icon>list_alt</mwc-icon>${i18next.t('title.view_vas_changes')}</h2>
					<data-grist
						id="product-grist"
						.mode="${isMobileDevice() ? 'LIST' : 'GRID'}"
						.config="${this.config}"
						.data="${this.vasData}"
					></data-grist>
				</div>
			</div>

			<div class="button-container">
				<mwc-button raised @click=${() => history.back()} label="${i18next.t('button.close')}"></mwc-button>
			</div>
		`
	}

	constructor() {
		super()
		this.vasData = { records: [] }
	}

	updated(changedProps) {
		if (changedProps.has('data')) {
			this.vasData = {
				...this.data,
				records: this.data.records.filter(
					item => item.editType || item.itemEditType
				)
			}
		}
	}

	firstUpdated() {
		this.config = {
			list: {
				fields: [
					'itemEditType',
					'batchId',
          'productSKU',
					'adjustedBatchId',
					'adjustedSku',
          'qty',
					'adjustedQty',
          'packingType',
					'adjustedPackingType',
          'uom',
					'adjustedUom',
          'uomValue',
					'adjustedUomValue',
          'vas',
          'vasQty',
					'adjustedVasQty',
					'newBatchId',
					'adjustedNewBatchId',
          'newSKU',
					'adjustedNewSku',
          'newPackingType',
					'adjustedNewPackingType',
          'newUom',
					'adjustedNewUom',
					'newUnitUomValue',
					'adjustedNewUnitUomValue',
          'newUomValue',
					'adjustedNewUomValue',
          'outputQty',
					'adjustedOutputQty',
          'vasRemark',
					'adjustedVasRemark',
				]
			},
			pagination: { infinite: true },
			rows: { 
				appendable: false ,
				groups: [{ column: 'productSKU' }]
			},
			columns: [
				{ type: 'gutter', gutterName: 'sequence' },
				{
					type: 'string',
					name: 'itemEditType',
					header: i18next.t('field.type'),
					width: 100
				},
				{
					type: 'string',
					name: 'batchId',
					header: i18next.t('field.batch_no'),
					width: 150
				},
				{
					type: 'string',
					name: 'adjustedBatchId',
					header: i18next.t('field.adjusted_batch_id'),
					width: 150
				},
				{
					type: 'string',
					name: 'productSKU',
					header: i18next.t('field.sku'),
					width: 150
				},
				{
					type: 'string',
					name: 'adjustedSku',
					header: i18next.t('field.adjusted_sku'),
					width: 150
				},
				{
					type: 'integer',
					name: 'qty',
					header: i18next.t('field.qty'),
					width: 100
				},
				{
					type: 'string',
					name: 'adjustedQty',
					header: i18next.t('field.adjusted_qty'),
					width: 100
				},
				{
					type: 'string',
					name: 'packingType',
					header: i18next.t('field.packing_type_sku', { sku: 'SKU' }),
					width: 150
				},
				{
					type: 'string',
					name: 'adjustedPackingType',
					header: i18next.t('field.adjusted_packing_type_sku', { sku: 'SKU' }),
					width: 150
				},
				{
					type: 'string',
					name: 'uom',
					header: i18next.t('field.uom_sku', { sku: 'SKU' }),
					width: 100
				},
				{
					type: 'string',
					name: 'adjustedUom',
					header: i18next.t('field.adjusted_uom', { sku: 'SKU'}),
					width: 100
				},
				{
					type: 'integer',
					name: 'uomValue',
					header: i18next.t('field.uom_value_sku', { sku: 'SKU' }),
					width: 100
				},
				{
					type: 'integer',
					name: 'adjustedUomValue',
					header: i18next.t('field.adjusted_uom_value_sku', { sku: 'SKU' }),
					width: 100
				},
				{
					type: 'string',
					name: 'group',
					hidden: true
				},
				{
					type: 'string',
					name: 'orderVasItemId',
					hidden: true,
				},
				{
					type: 'object',
					name: 'vas',
					header: i18next.t('field.vas'),
					width: 250
				},
				{
					type: 'integer',
					name: 'vasQty',
					header: i18next.t('field.vas_qty'),
					width: 80
				},
				{
					type: 'integer',
					name: 'adjustedVasQty',
					header: i18next.t('field.adjusted_vas_qty'),
					width: 80
				},
				{
					type: 'string',
					name: 'newBatchId',
					header: i18next.t('field.batch_no_(new_sku)'),
					width: 150
				},
				{
					type: 'string',
					name: 'adjustedNewBatchId',
					header: i18next.t('field.adjusted_batch_id_new_sku'),
					width: 150
				},
				{
					type: 'string',
					name: 'newSku',
					header: i18next.t('field.new_sku'),
					width: 200
				},
				{
					type: 'string',
					name: 'adjustedNewSku',
					header: i18next.t('field.adjusted_new_sku'),
					width: 200
				},
				{
					type: 'string',
					name: 'newPackingType',
					header: i18next.t('field.packing_type_sku', { sku: 'N. SKU' }),
					width: 150
				},
				{
					type: 'string',
					name: 'adjustedNewPackingType',
					header: i18next.t('field.adjusted_packing_type_sku', { sku: 'N. SKU' }),

					width: 150
				},
				{
					type: 'string',
					name: 'newUom',
					header: i18next.t('field.uom_sku', { sku: 'N.SKU' }),
					width: 80
				},
				{
					type: 'string',
					name: 'adjustedNewUom',
					header: i18next.t('field.adjusted_uom_sku', { sku: 'N.SKU' }),
					width: 80
				},
				{
					type: 'float',
					name: 'newUnitUomValue',
					header: i18next.t('field.uom_value_sku', { sku: 'NEW SKU' }),
					width: 150
				},
				{
					type: 'float',
					name: 'adjustedNewUnitUomValue',
					header: i18next.t('field.adjusted_uom_value_sku', { sku: 'NEW SKU' }),
					width: 150
				},
				{
					type: 'float',
					name: 'newUomValue',
					header: i18next.t('field.total_uom_value_sku', { sku: 'N.SKU' }),
					width: 150
				},
				{
					type: 'float',
					name: 'adjustedNewUomValue',
					header: i18next.t('field.adjusted_total_uom_value_sku', { sku:'N.SKU' }),
					width: 150
				},
				{
					type: 'integer',
					name: 'outputQty',
					header: i18next.t('field.output_qty'),
					width: 100
				},
				{
					type: 'integer',
					name: 'adjustedOutputQty',
					header: i18next.t('field.adjusted_output_qty'),
					width: 100
				},
				{
					type: 'string',
					name: 'vasRemark',
					header: i18next.t('field.remark'),
					width: 400
				},
				{
					type: 'string',
					name: 'adjustedVasRemark',
					header: i18next.t('field.adjusted_vas_remark'),
					width: 400
				}
			]
		}
	}

	_showToast({ type, message }) {
		document.dispatchEvent(
			new CustomEvent('notify', {
				detail: {
					type,
					message
				}
			})
		)
	}
}
window.customElements.define('vas-changes-popup', VasChangesPopup)