import { html, LitElement } from 'lit'
import { connect } from 'pwa-helpers'
import { store } from '../../store'
import { translate, } from '../../../translate'
import { addFriendsModalStyles } from '../../styles/core-css'
import '@material/mwc-button'
import '@material/mwc-checkbox'
import '@material/mwc-dialog'
import '@polymer/paper-spinner/paper-spinner-lite.js'

class AddFriendsModal extends connect(store)(LitElement) {
	static get properties() {
		return {
			isOpen: { type: Boolean },
			setIsOpen: { attribute: false },
			isLoading: { type: Boolean },
			userSelected: { type: Object },
			alias: { type: String },
			willFollow: { type: Boolean },
			notes: { type: String },
			onSubmit: { attribute: false },
			editContent: { type: Object },
			onClose: { attribute: false },
			mySelectedFeeds: { type: Array },
			availableFeeedSchemas: { type: Array },
			isLoadingSchemas: { type: Boolean }
		}
	}

	static get styles() {
		return [addFriendsModalStyles]
	}

	constructor() {
		super()
		this.isOpen = false
		this.isLoading = false
		this.alias = ''
		this.willFollow = true
		this.notes = ''
		this.nodeUrl = this.getNodeUrl()
		this.myNode = this.getMyNode()
		this.mySelectedFeeds = []
		this.availableFeeedSchemas = []
		this.isLoadingSchemas = false
	}

	render() {
		return html`
			<div class="modal-overlay ${this.isOpen ? '' : 'hidden'}">
				<div class="modal-content">
					<div class="inner-content">
						<div style="text-align:center">
							<h1>
								${this.editContent
								? translate('friends.friend10')
								: translate('friends.friend2')}
							</h1>
							<hr />
						</div>
						<p>${translate('friends.friend3')}</p>
						<div class="checkbox-row">
							<label
								for="willFollow"
								id="willFollowLabel"
								style="color: var(--black);"
							>
								${translate('friends.friend5')}
							</label>
							<mwc-checkbox
								style="margin-right: -15px;"
								id="willFollow"
								@change=${(e) => {
									this.willFollow = e.target.checked;
								}}
								?checked=${this.willFollow}
							></mwc-checkbox>
						</div>
						<div style="height:15px"></div>
						<div style="display: flex;flex-direction: column;">
							<label
								for="name"
								id="nameLabel"
								style="color: var(--black);"
							>
								${translate('login.name')}
							</label>
							<input
								id="name"
								class="input"
								?disabled=${true}
								value=${this.userSelected ? this.userSelected.name : ''}
							/>
						</div>
						<div style="height:15px"></div>
						<div style="display: flex;flex-direction: column;">
							<label
								for="alias"
								id="aliasLabel"
								style="color: var(--black);"
							>
								${translate('friends.friend6')}
							</label>
							<input
								id="alias"
								placeholder=${translate('friends.friend7')}
								class="input"
								.value=${this.alias}
								@change=${(e) => {
									this.alias = e.target.value
								}}
							/>
						</div>
						<div style="height:15px"></div>
						<div style="margin-bottom:0;">
							<textarea
								class="input"
								@change=${(e) => {
									this.notes = e.target.value
								}}
								.value=${this.notes}
								?disabled=${this.isLoading}
								id="messageBoxAddFriend"
								placeholder="${translate('friends.friend4')}"
								rows="3"
							></textarea>
						</div>
						<div style="height:15px"></div>
						<h2>${translate('friends.friend15')}</h2>
						<div style="margin-bottom:0;">
							<p>${translate('friends.friend16')}</p>
						</div>
						<div>
							${this.isLoadingSchemas ?
								html`
									<div style="width:100%;display: flex; justify-content:center">
										<paper-spinner-lite active></paper-spinner-lite>
									</div>
								` : ''
							}
							${this.availableFeeedSchemas.map((schema) => {
								const isAlreadySelected = this.mySelectedFeeds.find((item) => item.name === schema.name);
								let avatarImgApp;
								const avatarUrl2 = `${this.nodeUrl}/arbitrary/THUMBNAIL/${schema.name}/qortal_avatar?async=true&apiKey=${this.myNode.apiKey}`;
								avatarImgApp = html`<img src="${avatarUrl2}" style="max-width:100%; max-height:100%;" onerror="this.onerror=null; this.src='/img/incognito.png';"/>`;
								return html`
									<div
										class="app-name"
										style="background:${isAlreadySelected ? 'lightblue' : ''}"
										@click=${() => {
											const copymySelectedFeeds = [...this.mySelectedFeeds];
											const findIndex = copymySelectedFeeds.findIndex((item) => item.name === schema.name);
											if (findIndex === -1) {
												if (this.mySelectedFeeds.length > 4) return
												copymySelectedFeeds.push({name: schema.name, identifier: schema.identifier, service: schema.service});
												this.mySelectedFeeds = copymySelectedFeeds;
											} else {
												this.mySelectedFeeds = copymySelectedFeeds.filter((item) => item.name !== schema.name);
											}
										}}
									>
										<div class="avatar">${avatarImgApp}</div>
										<span style="color:${isAlreadySelected ? 'var(--white)' : 'var(--black)'};font-size:16px">${schema.name}</span>
									</div>
								`
							})}
						</div>
					</div>
					<div style="display:flex;justify-content:space-between;align-items:center;margin-top:20px">
						<button
							class="modal-button-red"
							?disabled="${this.isLoading}"
							@click="${() => {
								this.setIsOpen(false);
								this.clearFields();
								this.onClose();
							}}"
						>
							${translate('general.close')}
						</button>
						${this.editContent ?
							html`
								<button ?disabled="${this.isLoading}" class="modal-button-red" @click=${() => {this.removeFriend();}}>
									${translate('friends.friend14')}
								</button>
							` : ''
						}
						<button ?disabled="${this.isLoading}" class="modal-button" @click=${() => {this.addFriend();}}>
							${this.editContent ? translate('friends.friend10') : translate('friends.friend2')}
						</button>
					</div>
				</div>
			</div>
		`
	}

	firstUpdated() {
		// ...
	}

	getNodeUrl() {
		const myNode = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node]
		return myNode.protocol + '://' + myNode.domain + ':' + myNode.port
	}

	getMyNode() {
		return store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node]
	}

	clearFields() {
		this.alias = ''
		this.willFollow = true
		this.notes = ''
	}

	addFriend() {
		this.onSubmit({
			name: this.userSelected.name,
			alias: this.alias,
			notes: this.notes,
			willFollow: this.willFollow,
			mySelectedFeeds: this.mySelectedFeeds
		})

		this.clearFields()
		this.onClose()
	}

	removeFriend() {
		this.onSubmit(
			{
				name: this.userSelected.name,
				alias: this.alias,
				notes: this.notes,
				willFollow: this.willFollow,
				mySelectedFeeds: this.mySelectedFeeds
			},
			true
		)

		this.clearFields()
		this.onClose()
	}

	async updated(changedProperties) {
		if (changedProperties && changedProperties.has('editContent') && this.editContent) {
			this.userSelected = { name: this.editContent.name ?? '' }
			this.notes = this.editContent.notes ?? ''
			this.willFollow = this.editContent.willFollow ?? true
			this.alias = this.editContent.alias ?? ''
			this.requestUpdate()
		}

		if (changedProperties && changedProperties.has('isOpen') && this.isOpen) {
			await this.getAvailableFeedSchemas()
		}
	}

	async getAvailableFeedSchemas() {
		try {
			this.isLoadingSchemas = true
			const url = `${this.nodeUrl}/arbitrary/resources/search?service=DOCUMENT&identifier=ui_schema_feed&prefix=true`
			const res = await fetch(url)
			const data = await res.json()

			if (data.error === 401) {
				this.availableFeeedSchemas = []
			} else {
				this.availableFeeedSchemas = data.filter((item) => item.identifier === 'ui_schema_feed')
			}

			this.userFoundModalOpen = true
		} catch (error) {
		} finally {
			this.isLoadingSchemas = false
		}
	}

	// Standard functions
	getApiKey() {
		const coreNode = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node]
		return coreNode.apiKey
	}

	isEmptyArray(arr) {
		if (!arr) { return true }
		return arr.length === 0
	}

	round(number) {
		return (Math.round(parseFloat(number) * 1e8) / 1e8).toFixed(8)
	}
}

window.customElements.define('add-friends-modal', AddFriendsModal)