/* eslint-disable max-lines */
import '../uiEditor.less';
import React, { useState } from 'react';
import _ from 'lodash';

import request from '../../utils/request-middleware.js';
import Themes from '@themes/themes.json';
import validations from './validations.js';

import Combobox from '@components/combobox.jsx';
import TagInput from '../tagInput/tagInput.jsx';

import homebreweryThumbnail from '../../thumbnail.png';

const callIfExists = (val, fn, ...args)=>{
	if(val[fn]) {
		val[fn](...args);
	}
};

const MetadataEditor = ({
	metadata = {
		shareId     : null,
		editId      : null,
		title       : '',
		description : '',
		tags        : [],
		lang        : 'en',
		renderer    : 'legacy',
		authors     : [],
		published   : false,
		thumbnail   : '',
		theme       : '5ePHB',
	},
	onChange = ()=>{},
	reportError = ()=>{},
	userThemes = {},
	themeBundle = {}
})=>{
	const [showThumbnail, setShowThumbnail] = useState(true);

	const handleFieldChange = (name, e)=>{
		// load validation rules, and check input value against them
		const inputRules = validations[name] ?? [];
		const validationErr = inputRules.map((rule)=>rule(e.target.value)).filter(Boolean);

		const debouncedReportValidity = _.debounce((target, errMessage)=>{
			callIfExists(target, 'setCustomValidity', errMessage);
			callIfExists(target, 'reportValidity');
		}, 300); // 300ms debounce delay, adjust as needed

		// if no validation rules, save to props
		if(validationErr.length === 0){
			callIfExists(e.target, 'setCustomValidity', '');
			onChange({
				...metadata,
				[name] : e.target.value
			});
			return true;
		} else {
			// if validation issues, display built-in browser error popup with each error.
			const errMessage = validationErr.map((err)=>{
				return `- ${err}`;
			}).join('\n');

			debouncedReportValidity(e.target, errMessage);
			return false;
		}
	};
	const handleRenderer = (renderer, e)=>{
		if(e.target.checked){
			metadata.renderer = renderer;
			if(renderer == 'legacy')
				metadata.theme = '5ePHB';
		}
		onChange(metadata, 'renderer');
	};
	const handlePublish = (val)=>{
		onChange({
			...metadata,
			published : val
		});
	};
	const handleTheme = (theme)=>{
		metadata.renderer = theme.renderer;
		metadata.theme    = theme.path;
		onChange(metadata, 'theme');
	};
	const handleThemeWritein = (e)=>{
		const shareId = e.target.value.split('/').pop(); //Extract just the ID if a URL was pasted in
		metadata.theme = shareId;
		onChange(metadata, 'theme');
	};
	const handleLanguage = (languageCode)=>{
		metadata.lang = languageCode;
		onChange(metadata);
	};
	const handleDelete = ()=>{
		if(metadata.authors && metadata.authors.length <= 1){
			if(!confirm('Are you sure you want to delete this brew? Because you are the only owner of this brew, the document will be deleted permanently.')) return;
			if(!confirm('Are you REALLY sure? You will not be able to recover the document.')) return;
		} else {
			if(!confirm('Are you sure you want to remove this brew from your collection? This will remove you as an editor, but other owners will still be able to access the document.')) return;
			if(!confirm('Are you REALLY sure? You will lose editor access to this document.')) return;
		}

		request.delete(`/api/${metadata.googleId ?? ''}${metadata.editId}`)
			.send()
			.end((err, res)=>{
				if(err) {
					reportError(err);
				} else {
					window.location.href = '/';
				}
			});
	};
	const handleDeleteAuthor = (author)=>{
		if(!confirm('Are you sure you want to remove this author? They will lose all edit access to this brew, and it will dissapear from their userpage.')) return;
		if(!metadata.authors.includes(author)) return;
		onChange({
    		...metadata,
    		authors : metadata.authors.filter((a)=>a !== author)
		});
	};
	const renderPublish = ()=>{
		if(metadata.published){
			return <button id='publish-button' className='unpublish' onClick={()=>handlePublish(false)}>
				<i className='fas fa-ban' aria-hidden='true' /> unpublish
			</button>;
		} else {
			return <button id='publish-button' className='publish' onClick={()=>handlePublish(true)}>
				<i className='fas fa-globe' aria-hidden='true' /> publish
			</button>;
		}
	};
	const renderAuthors = ()=>{
		const authors = metadata.authors;
		const isOwner = global.account?.username && global.account?.username === authors[0];
		if(!isOwner || authors.length < 2) return (
			<div className='field authors'>
				<label>authors</label>
				<div className='value'>
					{authors.length > 0 && (
						<a href={`/user/${authors[0]}`} className='author-link' target='_blank' title={`Owner - Click to open ${authors[0]}'s profile in a new tab`}>
							{authors[0]}{authors.length > 1 && ', '}
						</a>
					)}
					{authors.length > 1 && authors.slice(1).map((author, i)=>(
        				<a href={`/user/${author}`} className='author-link' title={`Author - Click to open ${author}'s profile in a new tab`}>
        					{author}{i+2 < authors.length && ', '}
        				</a>
        			))}
				</div>
			</div>
		);
		return (
			<div className='field authors'>
				<label>Authors</label>
				<ul className='list'>
					{authors.length > 0 && (
						<li className='tag owner' title='Owner'>
							<a href={`/user/${authors[0]}`} className='author-link' title={`Owner - Click to open ${authors[0]}'s profile in a new tab`}>
								{authors[0]}
							</a>
						</li>
					)}

					{authors.length > 1 && authors.slice(1).map((author, i)=>(
        				<li className='tag author' key={i + 1} title='Author'>
        					<a href={`/user/${author}`} className='author-link' title={`Author - Click to open ${authors[0]}'s profile in a new tab`}>
        						{author}
        					</a>
        					<button
								onClick={()=>handleDeleteAuthor(author)}
								className='delete'
								title={`Remove ${author} as an author`}
        					>
        						<i className='fa fa-times fa-fw' />
        					</button>
        				</li>
        			))}
				</ul>
			</div>
		);
	};
	const renderThemeDropdown = ()=>{
		const mergedThemes = _.merge(Themes, userThemes);

		const listThemes = (renderer)=>{
			return _.map(_.values(mergedThemes[renderer]), (theme)=>{
				if(theme.path == metadata.shareId) return;
				const preview = theme.thumbnail || `/themes/${theme.renderer}/${theme.path}/dropdownPreview.png`;
				const texture = theme.thumbnail || `/themes/${theme.renderer}/${theme.path}/dropdownTexture.png`;
				return <div className='item' key={`${renderer}_${theme.name}`} value={`${theme.author ?? renderer} : ${theme.name}`} data={theme} title={''}>
					{theme.author ?? renderer} : {theme.name}
					<div className='texture-container'>
						<img src={texture}/>
					</div>
					<div className='preview'>
						<h6>{theme.name} preview</h6>
						<img src={preview}/>
					</div>
				</div>;
			}).filter(Boolean);
		};

		const currentRenderer = metadata.renderer;
		const currentThemeDisplay = themeBundle?.name ? `${themeBundle.author ?? currentRenderer} : ${themeBundle.name}` : 'No Theme Selected';
		let dropdown;

		if(currentRenderer == 'legacy') {
			dropdown =
				<div className='disabled value' trigger='disabled'>
					<div> Themes are not supported in the Legacy Renderer </div>
				</div>;
		} else {
			dropdown =
				<div className='value' data-tooltip-top='Select from the list below (built-in themes and brews you have tagged "meta:theme"), or paste in the Share URL or Share ID of any brew.'>
					<Combobox trigger='click'
						id='combobox-themes'
						className='themes-dropdown'
						default={currentThemeDisplay}
						placeholder='Select from below, or enter the Share URL or ID of a brew with the meta:theme tag'
						onSelect={(value)=>handleTheme(value)}
						onEntry={(e)=>{
							e.target.setCustomValidity('');	//Clear the validation popup while typing
							if(handleFieldChange('theme', e))
								handleThemeWritein(e);
						}}
						options={listThemes(currentRenderer)}
						autoSuggest={{
							suggestMethod           : 'includes',
							clearAutoSuggestOnClick : true,
							filterOn                : ['value', 'title']
						}}
					/>
				</div>;
		}

		return <div className='field themes'>
			<label htmlFor='combobox-themes'>theme</label>
			{dropdown}
		</div>;
	};
	const renderLanguageDropdown = ()=>{
		const langCodes = ['en', 'de', 'de-ch', 'fr', 'ja', 'es', 'it', 'sv', 'ru', 'zh-Hans', 'zh-Hant'];
		const listLanguages = ()=>{
			return _.map(langCodes.sort(), (code, index)=>{
				const localName = new Intl.DisplayNames([code], { type: 'language' });
				const englishName = new Intl.DisplayNames('en', { type: 'language' });
				return <div className='item' title={englishName.of(code)} key={`${index}`} value={code} detail={localName.of(code)}>
					{code}
					<div className='detail'>{localName.of(code)}</div>
				</div>;
			});
		};

		return <div className='field language'>
			<label htmlFor='combobox-language'>language</label>
			<div className='value' data-tooltip-right='Sets the HTML Lang property for your brew. May affect hyphenation or spellcheck.'>
				<Combobox trigger='click'
					id='combobox-language'
					className='language-dropdown'
					default={metadata.lang || ''}
					placeholder='en'
					onSelect={(value)=>handleLanguage(value)}
					onEntry={(e)=>{
						e.target.setCustomValidity('');	//Clear the validation popup while typing
						handleFieldChange('lang', e);
					}}
					options={listLanguages()}
					autoSuggest={{
						suggestMethod           : 'startsWith',
						clearAutoSuggestOnClick : true,
						filterOn                : ['value', 'detail', 'title']
					}}
				/>
			</div>
		</div>;
	};
	const renderRenderOptions = ()=>{
		return <div className='field renderers'>
			<label>Renderer</label>
			<div className='value'>
				<label key='legacy'>
					<input
						type='radio'
						value = 'legacy'
						name = 'renderer'
						checked={metadata.renderer === 'legacy'}
						onChange={(e)=>handleRenderer('legacy', e)} />
					Legacy
				</label>

				<label key='V3'>
					<input
						type='radio'
						value = 'V3'
						name = 'renderer'
						checked={metadata.renderer === 'V3'}
						onChange={(e)=>handleRenderer('V3', e)} />
					V3
				</label>
				<small><a href='/legacy' target='_blank' rel='noopener noreferrer'>Click here to see the demo page for the old Legacy renderer!</a></small>
			</div>
		</div>;
	};

	return (
		<div className='metadataEditor uiEditor'>
			<h1>Properties Editor</h1>

			<div className='field title'>
				<label htmlFor='title_field'>title</label>
				<input
					type='text'
					id='title_field'
					className='value'
					defaultValue={metadata.title}
					onChange={(e)=>handleFieldChange('title', e)}
				/>
			</div>
			<fieldset className='field-group'>
				<div className='field-column'>
					<div className='field description'>
						<label htmlFor='description_field'>description</label>
						<textarea
							id='description_field'
							defaultValue={metadata.description}
							className='value'
							onChange={(e)=>handleFieldChange('description', e)}
						/>
					</div>
					<div className='field thumbnail'>
						<label htmlFor='thumbnail_field'>thumbnail</label>
						<input
							type='text'
							id='thumbnail_field'
							defaultValue={metadata.thumbnail}
							placeholder='https://my.thumbnail.url'
							className='value'
							onChange={(e)=>handleFieldChange('thumbnail', e)}
						/>
						<button
							className='display'
							onClick={()=>setShowThumbnail(!showThumbnail)}
							aria-label={`${showThumbnail ? 'hide thumbnail' : 'show thumbnail'}`}>
							<i className={`fas fa-caret-${showThumbnail ? 'right' : 'left'}`} />
						</button>
					</div>
				</div>
				{showThumbnail && <img className='thumbnail-preview' src={metadata.thumbnail || homebreweryThumbnail}></img>}
			</fieldset>
			<div className='field tags'>
				<label htmlFor='combobox-tags'>Tags</label>
				<div className='value'>
					<TagInput
						id='combobox-tags'
						label='tags'
						valuePatterns={/^\s*(?:(?:group|meta|system|type)\s*:\s*)?[A-Za-z0-9][A-Za-z0-9 \/\\.&_\-]{0,40}\s*$/}
						placeholder='add tag'
						unique={true}
						values={metadata.tags}
						onChange={(e)=>handleFieldChange('tags', e)}
						tooltip='You may start tags with "type", "system", "group" or "meta" followed by a colon ":", these will be colored in your userpage.'
					/>
				</div>
			</div>
			{renderLanguageDropdown()}
			{renderThemeDropdown()}
			{renderRenderOptions()}

			<h2>Authors</h2>
			{renderAuthors()}
			<div className='field invitedAuthors'>
				<label htmlFor='combobox-invited-authors'>Invited authors</label>
				<div className='value'>
					<TagInput
						id='combobox-invited-authors'
						label='invited authors'
						valuePatterns={/.+/}
						validators={[(v)=>!metadata.authors?.includes(v)]}
						placeholder='invite author'
						unique={true}
						tooltip={`Invited author usernames are case sensitive.
							After adding an invited author, send them the edit link. There, they can choose to accept or decline the invitation.`}
						values={metadata.invitedAuthors}
						onChange={(e)=>handleFieldChange('invitedAuthors', e)}
					/>
				</div>
			</div>

			<h2>Privacy</h2>
			<div className='field publish'>
				<label htmlFor='publish-button'>publish</label>
				<div className='value'>
					{renderPublish()}
					<small>
						Published brews are searchable in <a href='/vault'>the Vault</a> and visible on your user page. Unpublished brews are not
						indexed in the Vault or visible on your user page, but can still be shared and indexed by search engines. You can unpublish a
						brew any time.
					</small>
				</div>
			</div>
			{metadata.editId && <div className='field delete'>
				<label htmlFor='delete-button'>delete</label>
				<div className='value'>
					<button id='delete-button' onClick={handleDelete}>
						<i className='fas fa-trash-alt' /> delete brew
					</button>
				</div>
			</div>}
		</div>
	);
};

export default MetadataEditor;