import {Dom, Event, Loc, Reflection, Tag, Type} from 'main.core';
import {type BaseEvent, EventEmitter} from 'main.core.events'
import './entity-card.css';
import 'ui.entity-editor';
import 'ui.notification';
import 'ui.feedback.form';
import 'ui.hint';
import 'ui.design-tokens';
import 'ui.fonts.opensans';
import FieldsFactory from './fields-factory'
import ControllersFactory from './controllers-factory'
import IblockFieldConfigurationManager from './field-configurator/iblock-field-configuration-manager'
import GridFieldConfigurationManager from './field-configurator/grid-field-configuration-manager';
import {Popup} from "main.popup";
import {BaseCard} from "./base-card/base-card";
import { ToolAvailabilityManager } from 'catalog.tool-availability-manager';

class EntityCard extends BaseCard
{
	stackWithOffset = null;

	constructor(id, settings = {})
	{
		super(id, settings);

		this.cardSettings = settings.cardSettings || [];
		this.hiddenFields = settings.hiddenFields || [];
		this.feedbackUrl = settings.feedbackUrl || '';
		this.variationGridId = settings.variationGridId;
		this.productStoreGridId = settings.productStoreGridId || null;
		this.settingsButtonId = settings.settingsButtonId;
		this.createDocumentButtonId = settings.createDocumentButtonId;
		this.createDocumentButtonMenuPopupItems = settings.createDocumentButtonMenuPopupItems;

		this.componentName = settings.componentName || null;
		this.componentSignedParams = settings.componentSignedParams || null;
		this.variationGridComponentName = (settings.variationGridComponentName || 'BX.Catalog.VariationGrid') + '.Instance';

		this.isSimpleProduct = settings.isSimpleProduct || false;
		this.isWithOrdersMode = settings.isWithOrdersMode || false;
		this.isInventoryManagementUsed = settings.isInventoryManagementUsed || false;
		this.isInventoryManagementToolEnabled = settings.isInventoryManagementToolEnabled || false;

		this.registerFieldsFactory();
		this.registerControllersFactory();
		this.registerEvents();
		this.bindCardSettingsButton();
		this.bindCreateDocumentButtonMenu();

		EventEmitter.subscribe('SidePanel.Slider:onMessage', this.onSliderMessage.bind(this));
		EventEmitter.subscribe('BX.UI.EntityEditorSection:onLayout', this.onSectionLayout.bind(this));
		EventEmitter.subscribe('Grid::updated', this.onGridUpdatedHandler.bind(this));
	}

	getEntityType()
	{
		return 'Entity';
	}

	getCardSetting(id: string)
	{
		return this.cardSettings.filter(item => {
			return item.id === id;
		})[0];
	}

	isCardSettingEnabled(id: string)
	{
		const settingItem = this.getCardSetting(id);

		return settingItem && settingItem.checked;
	}

	bindCardSettingsButton()
	{
		const settingsButton = this.getSettingsButton();
		if (settingsButton)
		{
			Event.bind(settingsButton.getContainer(), 'click', this.showCardSettingsPopup.bind(this));
		}
	}

	getSettingsButton()
	{
		return BX.UI.ButtonManager.getByUniqid(this.settingsButtonId);
	}

	registerFieldsFactory()
	{
		return new FieldsFactory();
	}

	onGridUpdatedHandler(event: BaseEvent)
	{
		const [grid] = event.getCompatData();

		if (grid && grid.getId() === this.getVariationGridId())
		{
			this.updateSettingsCheckboxState();
		}
	}

	onSectionLayout()
	{

	}

	getProductStoreGridId()
	{
		return this.productStoreGridId;
	}

	getProductStoreGridComponent()
	{
		return Reflection.getClass('BX.Catalog.ProductStoreGridManager.Instance');
	}

	reloadProductStoreGrid()
	{
		const gridComponent = this.getProductStoreGridComponent();
		if (gridComponent)
		{
			if (this.getProductStoreGridId() && this.getProductStoreGridId() === gridComponent.getGridId())
			{
				gridComponent.reloadGrid();
			}
		}
	}

	/**
	 * @returns {BX.Catalog.VariationGrid|BX.Catalog.ProductServiceGrid|null}
	 */
	getVariationGridComponent()
	{
		//return Reflection.getClass('BX.Catalog.VariationGrid.Instance');
		return Reflection.getClass(this.variationGridComponentName);
	}

	reloadVariationGrid()
	{
		const gridComponent = this.getVariationGridComponent();
		if (gridComponent)
		{
			gridComponent.reloadGrid();
		}
	}

	getVariationGridId()
	{
		return this.variationGridId;
	}

	getVariationGrid()
	{
		if (!Reflection.getClass('BX.Main.gridManager.getInstanceById'))
		{
			return null;
		}

		return BX.Main.gridManager.getInstanceById(this.getVariationGridId());
	}

	registerControllersFactory()
	{
		return new ControllersFactory();
	}

	registerEvents()
	{
		EventEmitter.subscribe('BX.UI.EntityConfigurationManager:onInitialize', this.onConfigurationManagerInit.bind(this));
		EventEmitter.subscribe('BX.UI.EntityEditor:onCancel', this.removeFileHiddenInputs.bind(this));
		EventEmitter.subscribe('BX.UI.EntityEditor:onInit', this.onEditorInitHandler.bind(this));

		EventEmitter.subscribe('BX.UI.EntityEditorAjax:onSubmit', this.onEditorAjaxSubmit.bind(this));
		EventEmitter.subscribe('onEntityCreate', this.onEntityCreateHandler.bind(this));
		EventEmitter.subscribe('onEntityUpdate', this.onEntityUpdateHandler.bind(this));

		EventEmitter.subscribe('onAttachFiles', this.onAttachFilesHandler.bind(this));
		EventEmitter.subscribe('BX.Main.Popup:onClose', this.onFileEditorCloseHandler.bind(this));

		EventEmitter.subscribe('onAfterVariationGridSave', this.onAfterVariationGridSave.bind(this));
	}

	onAfterVariationGridSave(event: BaseEvent)
	{
		const data = event.getData();

		if (data.gridId === this.getVariationGridId())
		{
			this.reloadProductStoreGrid();
		}
	}

	onAttachFilesHandler(event: BaseEvent)
	{
		const editor = this.getEditorInstance();
		if (!editor)
		{
			return;
		}

		const [, , uploader] = event.getCompatData();
		if (uploader && Type.isDomNode(uploader.fileInput))
		{
			const parent = uploader.fileInput.closest('[data-cid]');

			if (Type.isDomNode(parent))
			{
				const controlName = parent.getAttribute('data-cid');
				const control = editor.getControlByIdRecursive(controlName);

				if (control)
				{
					control.markAsChanged();
				}
			}
		}
	}

	onFileEditorCloseHandler(event: BaseEvent)
	{
		const [popup] = event.getCompatData();
		if (popup && popup.getId() === 'popupFM' && popup.onApplyFlag)
		{
			this.showNotification(Loc.getMessage('CATALOG_ENTITY_CARD_FILE_CLOSE_NOTIFICATION_2'), {
				id: 'fileCloseNotification',
				blinkOnUpdate: false,
				autoHideDelay: 5000
			});
		}
	}

	onEditorInitHandler(event: BaseEvent)
	{
		const [editor, fields] = event.getCompatData();

		if (editor && !fields.entityId)
		{
			const control = editor.getControlByIdRecursive('NAME');

			if (control)
			{
				requestAnimationFrame(() => {
					control.focus()
				});
			}
		}
	}

	/**
	 * @returns {BX.UI.EntityEditor|null}
	 */
	getEditorInstance()
	{
		if (Reflection.getClass('BX.UI.EntityEditor'))
		{
			return BX.UI.EntityEditor.getDefault();
		}

		return null;
	}

	onEditorAjaxSubmit(event: BaseEvent)
	{
		const [fields, response] = event.getCompatData();

		const title = fields['NAME-CODE'].NAME || '';
		this.changePageTitle(title);

		if (response.data)
		{
			if (Type.isBoolean(response.data.IS_SIMPLE_PRODUCT))
			{
				this.isSimpleProduct = response.data.IS_SIMPLE_PRODUCT;
			}
		}

		if (response.status === 'success')
		{
			this.removeFileHiddenInputs();
		}
	}

	onEntityCreateHandler(event: BaseEvent)
	{
		const [data] = event.getCompatData();
		this.postSliderMessage('onCreate', data)
	}

	onEntityUpdateHandler(event: BaseEvent)
	{
		const [data] = event.getCompatData();
		this.postSliderMessage('onUpdate', data)
	}

	postSliderMessage(action, fields)
	{
		BX.SidePanel.Instance.postMessage(
			window,
			`Catalog.${this.getEntityType()}Card::${action}`,
			fields
		);
	}

	changePageTitle(title)
	{
		const titleNode = document.getElementById('pagetitle');

		if (Type.isDomNode(titleNode))
		{
			titleNode.innerText = title;
		}

		document.title = title;

		if (BX.getClass('BX.SidePanel.Instance.updateBrowserTitle'))
		{
			BX.SidePanel.Instance.updateBrowserTitle();
		}
	}

	removeFileHiddenInputs()
	{
		document.querySelectorAll('form>input[type="hidden"]')
			.forEach(input => {
				let name = input.getAttribute('name');
				let deleteInput = document.querySelector(`form>input[name="${name}_del"]`);

				if (deleteInput)
				{
					Dom.remove(input);
					Dom.remove(deleteInput);
				}
			});
	}

	onConfigurationManagerInit(event: BaseEvent)
	{
		const [, eventArgs] = event.getCompatData();

		if (!eventArgs.type || eventArgs.type === 'editor')
		{
			eventArgs.configurationFieldManager = this.initializeIblockFieldConfigurationManager(eventArgs);
		}

		if (eventArgs.id === 'variation_grid')
		{
			eventArgs.configurationFieldManager = this.initializeVariationPropertyConfigurationManager(eventArgs);
		}

		if (eventArgs.id === 'service_grid')
		{
			eventArgs.configurationFieldManager = this.initializeServicePropertyConfigurationManager(eventArgs);
		}
	}

	initializeIblockFieldConfigurationManager(eventArgs)
	{
		const configurationManager = IblockFieldConfigurationManager.create(this.id, eventArgs);
		configurationManager.setCreationPageUrl(this.settings.creationPropertyUrl);

		return configurationManager;
	}

	initializeVariationPropertyConfigurationManager(eventArgs)
	{
		const configurationManager = GridFieldConfigurationManager.create(this.id, eventArgs);
		configurationManager.setCreationPageUrl(this.settings.creationVariationPropertyUrl);

		return configurationManager;
	}

	initializeServicePropertyConfigurationManager(eventArgs)
	{
		return GridFieldConfigurationManager.create(this.id, eventArgs);
	}

	showNotification(content, options)
	{
		options = options || {};

		if (BX.GetWindowScrollPos().scrollTop <= 10)
		{
			options.stack = this.getStackWithOffset();
		}

		BX.UI.Notification.Center.notify({
			content: content,
			position: 'top-right',
			width: 'auto',
			autoHideDelay: 3000,
			...options
		});
	}

	getStackWithOffset()
	{
		if (this.stackWithOffset === null)
		{
			this.stackWithOffset = new BX.UI.Notification.Stack(BX.mergeEx(
				{},
				BX.UI.Notification.Center.getStackDefaults(),
				{
					id: 'top-right-with-offset',
					position: 'top-right-with-offset',
					offsetY: 74
				}
			));
		}

		return this.stackWithOffset;
	}

	openFeedbackPanel()
	{
		EntityCard.openFeedbackPanelStatic();
	}

	static openFeedbackPanelStatic()
	{
		BX.UI.Feedback.Form.open({
			id: 'catalog-product-card-feedback',
			forms: [
				{'id': 269, 'lang': 'ru', 'sec': 'mqerov', 'zones': ['ru', 'by', 'kz']},
				{'id': 347, 'lang': 'en', 'sec': 'lxfji8', 'zones': ['en']},
				{'id': 349, 'lang': 'es', 'sec': 'gdf9i1', 'zones': ['es']},
				{'id': 355, 'lang': 'de', 'sec': 'x8k56n', 'zones': ['de']},
				{'id': 357, 'lang': 'ua', 'sec': '2z19xl', 'zones': ['ua']},
				{'id': 353, 'lang': 'com.br', 'sec': '5cleqn', 'zones': ['com.br']},
			],
		});
	}

	bindCreateDocumentButtonMenu()
	{
		const createDocumentButtonMenu = this.getCreateDocumentButtonMenu();
		if (createDocumentButtonMenu)
		{
			Event.bind(createDocumentButtonMenu.getContainer(), 'click', this.showCreateDocumentPopup.bind(this));
		}
	}

	getCreateDocumentButtonMenu()
	{
		const createDocumentButton = BX.UI.ButtonManager.getByUniqid(this.createDocumentButtonId);
		if (createDocumentButton)
		{
			return BX.UI.ButtonManager.getByUniqid(this.createDocumentButtonId).getMenuButton();
		}

		return null;
	}

	getCreateDocumentPopup()
	{
		if (!this.createDocumentPopup)
		{
			this.createDocumentPopup = new Popup(
				this.id + '-create-document',
				this.getCreateDocumentButtonMenu().getContainer(),
				{
					autoHide: true,
					draggable: false,
					offsetLeft: 0,
					offsetTop: 0,
					angle: {position: 'top', offset: 43},
					noAllPaddings: true,
					bindOptions: {forceBindPosition: true},
					closeByEsc: true,
					content: this.getCreateDocumentMenuContent()
				}
			);
		}

		return this.createDocumentPopup;
	}

	showCreateDocumentPopup()
	{
		this.getCreateDocumentPopup().show();
	}

	closeCreateDocumentPopup()
	{
		this.getCreateDocumentPopup().close();
	}

	getCreateDocumentMenuContent()
	{
		const popupWrapper = Tag.render`<div class="menu-popup"></div>`;
		const popupItemsContainer = Tag.render`<div class="menu-popup-items"></div>`;
		popupWrapper.appendChild(popupItemsContainer);

		this.createDocumentButtonMenuPopupItems.forEach((item) => {
			let itemEntry = null;
			if (this.isInventoryManagementToolEnabled)
			{
				itemEntry = Tag.render`
					<a class="menu-popup-item menu-popup-item-no-icon" href="${item.link}">
						<span class="menu-popup-item-text">${item.text}</span>
					</a>
				`;

				Event.bind(itemEntry, 'click', (event) => {
					event.preventDefault();
					this.closeCreateDocumentPopup();
				});
			}
			else
			{
				itemEntry = Tag.render`
					<a class="menu-popup-item menu-popup-item-no-icon">
						<span class="menu-popup-item-text">${item.text}</span>
					</a>
				`;

				Event.bind(itemEntry, 'click', (event) => {
					event.preventDefault();
					EntityCard.openInventoryManagementToolDisabledSlider();
					this.closeCreateDocumentPopup();
				});
			}

			popupItemsContainer.appendChild(itemEntry);
		});

		return popupWrapper;
	}

	static openInventoryManagementToolDisabledSlider()
	{
		ToolAvailabilityManager.openInventoryManagementToolDisabledSlider();
	}

	getCardSettingsPopup()
	{
		if (!this.settingsPopup)
		{
			this.settingsPopup = new Popup(
				this.id,
				this.getSettingsButton().getContainer(),
				{
					autoHide: true,
					draggable: false,
					offsetLeft: 0,
					offsetTop: 0,
					angle: {position: 'top', offset: 43},
					noAllPaddings: true,
					bindOptions: {forceBindPosition: true},
					closeByEsc: true,
					content: this.prepareCardSettingsContent()
				}
			);
		}

		return this.settingsPopup;
	}

	showCardSettingsPopup()
	{
		this.getCardSettingsPopup().show();
	}

	prepareCardSettingsContent()
	{
		const content = Tag.render`
			<div class='ui-entity-editor-popup-create-field-list'></div>
		`;

		this.cardSettings.map(item => {
			content.append(this.getSettingItem(item));
		});

		return content;
	}

	getSettingItem(item)
	{
		let input = '';
		if (!item.disabledCheckbox)
		{
			input = Tag.render`
				<input type="checkbox">
			`;

			input.checked = item.checked;
			input.disabled = item.disabled ?? false;
			input.dataset.settingId = item.id;
		}

		const hintNode = (
			Type.isStringFilled(item.hint)
				? Tag.render`<span class="catalog-entity-setting-hint" data-hint="${item.hint}"></span>`
				: ''
		);

		const setting = Tag.render`
				<label class="ui-ctl-block ui-entity-editor-popup-create-field-item ui-ctl-w100">
					<div class="ui-ctl-w10" style="text-align: center">${input}</div>
					<div class="ui-ctl-w75">
						<span class="ui-entity-editor-popup-create-field-item-title ${item.disabled ? 'catalog-entity-disabled-setting' : ''}">${item.title}${hintNode}</span>
						<span class="ui-entity-editor-popup-create-field-item-desc">${item.desc}</span>
					</div>
				</label>
			`;

		BX.UI.Hint.init(setting);

		if(item.id === 'SEO')
		{
			Event.bind(setting, 'click', (event) =>
			{
				BX.SidePanel.Instance.open(item.url, {
					cacheable: false,
					allowChangeHistory: false,
					data: {
						'ELEMENT_ID': this.entityId
					},
					width: 1000
				});
			})
		}
		else
		{
			Event.bind(setting, 'change', this.setProductCardSetting.bind(this));
		}


		return setting;
	}

	setProductCardSetting(event: BaseEvent)
	{
		const settingItem = this.getCardSetting(event.target.dataset.settingId);
		if (!settingItem)
		{
			return;
		}

		const settingEnabled = event.target.checked;

		if (settingItem.action === 'grid')
		{
			this.requestGridSettings(settingItem, settingEnabled);
		}
		else
		{
			this.requestCardSettings(settingItem, settingEnabled);
		}
	}

	onSliderMessage(event: BaseEvent)
	{
		const [sliderEvent] = event.getCompatData();

		if (
			sliderEvent.getEventId() === 'Catalog.VariationCard::onCreate'
			|| sliderEvent.getEventId() === 'Catalog.VariationCard::onUpdate'
		)
		{
			this.reloadVariationGrid();
		}
	}

	reloadGrid()
	{
		document.location.reload();
	}

	requestGridSettings(setting, enabled)
	{
		if (!this.getVariationGrid())
		{
			new Error('Cant find variation grid.');
		}

		const headers = [];
		const cells = this.getVariationGrid().getRows().getHeadFirstChild().getCells();

		Array.from(cells).forEach((header) => {
			if ('name' in header.dataset)
			{
				headers.push(header.dataset.name);
			}
		});

		BX.ajax.runComponentAction(
			this.componentName,
			'setGridSetting',
			{
				mode: 'class',
				data: {
					signedParameters: this.componentSignedParams,
					settingId: setting.id,
					selected: enabled,
					currentHeaders: headers
				}
			}
		).then(() => {
			let message = null;
			setting.checked = enabled;
			this.reloadVariationGrid();
			this.postSliderMessage('onUpdate', {});
			this.getCardSettingsPopup().close();

			if(setting.id === 'WAREHOUSE')
			{
				this.reloadGrid()
				message = enabled ? Loc.getMessage('CATALOG_ENTITY_CARD_WAREHOUSE_ENABLED') : Loc.getMessage('CATALOG_ENTITY_CARD_WAREHOUSE_DISABLED');
			}
			else
			{
				message = enabled ? Loc.getMessage('CATALOG_ENTITY_CARD_SETTING_ENABLED') : Loc.getMessage('CATALOG_ENTITY_CARD_SETTING_DISABLED');
				message = message.replace('#NAME#', setting.title)
			}

			this.showNotification(message, {
				category: 'popup-settings'
			});
		});
	}

	requestCardSettings(setting, enabled)
	{
		BX.ajax.runComponentAction(
			this.componentName,
			'setCardSetting',
			{
				mode: 'class',
				data: {
					signedParameters: this.componentSignedParams,
					settingId: setting.id,
					selected: enabled
				}
			}
		).then(() => {
			setting.checked = enabled;

			if (setting.id === 'CATALOG_PARAMETERS')
			{
				const section = this.getEditorInstance().getControlByIdRecursive('catalog_parameters');
				if (section)
				{
					section.refreshLayout();
				}
			}

			this.getCardSettingsPopup().close();

			let message = enabled ? Loc.getMessage('CATALOG_ENTITY_CARD_SETTING_ENABLED') : Loc.getMessage('CATALOG_ENTITY_CARD_SETTING_DISABLED');
			this.showNotification(message.replace('#NAME#', setting.title), {
				category: 'popup-settings'
			});
		});
	}

	updateSettingsCheckboxState()
	{
		const popupContainer = this.getCardSettingsPopup().getContentContainer();

		this.cardSettings
			.filter(item => item.action === 'grid' && Type.isArray(item.columns?.ITEMS))
			.forEach(item => {

				let allColumnsExist = true;
				item.columns.ITEMS.forEach(columnName => {
					if (!this.getVariationGrid().getColumnHeaderCellByName(columnName))
					{
						allColumnsExist = false;
					}
				})

				const checkbox = popupContainer.querySelector('input[data-setting-id="' + item.id + '"]');
				if (Type.isDomNode(checkbox))
				{
					checkbox.checked = allColumnsExist;
				}
			});
	}
}

export {EntityCard, BaseCard};