import { ChangeEvent, useState } from 'react'
import { TfiCheck, TfiClose, TfiPencil, TfiTrash } from 'react-icons/tfi';
import { Language } from '../../../../api/models/Types';
import ErrorInput from '../../../common/error/ErrorInput';
import ErrorField from '../../../common/error/ErrorField';
import { DeleteLanguage, EditLanguage } from '../../../../api/LanguageApi';
import { GetElementId } from '../../../../common/Helper';

export interface IListItem{
	language: Language,
	isDeleting: boolean,
	isEditing: boolean,
	enabled: boolean,
	setEditing: (languageId: string, value: boolean) => void,
	setDeleting: (languageId: string, value: boolean) => void,
	forceRefresh: () => void,
}

export function IsLanguageNameValid(value: string | undefined){
	return !(value == undefined || value.trim().length == 0)
}

export function IsLanguageCodeValid(value: string | undefined){
	return (value != undefined && value.trim().length == 3)
}

export default function LanguageItemEditComponent(props : IListItem) {
	const [editLanguageError, SetEditLanguageError] = useState<string | null>();
	
	const [newCodeNameValue, SetCodeNameValue] = useState<[code: string, name: string]>([props.language.codeIso3, props.language.name]);
	// const OnLanguageCodeChange = (event : ChangeEvent<HTMLInputElement>) => SetCodeNameValue([event.target.value, newCodeNameValue[1]]);
	const OnLanguageNameChange = (event : ChangeEvent<HTMLInputElement>) => SetCodeNameValue([newCodeNameValue[0], event.target.value]);
	if (!props.isEditing && (newCodeNameValue[0] != props.language.codeIso3 || newCodeNameValue[1] != props.language.name)){
		SetCodeNameValue([props.language.codeIso3, props.language.name]);
	}
	return(
		<ErrorField error={editLanguageError}>
			<ErrorInput error={editLanguageError}>
				<div className="input-group">
					<ErrorInput error={editLanguageError}>
						<input className="form-control" type="text" required={true} placeholder="Код ISO 639.2 Alpha-3"
							// value={newCodeNameValue[0]} minLength={3} maxLength={3} readOnly={true} disabled={!props.enabled} />
							value={newCodeNameValue[0]} readOnly={true} disabled={!props.enabled} />
					</ErrorInput>

					<ErrorInput error={editLanguageError}>
						<input className="form-control" type="text" required={true} placeholder="Название языка" onChange={OnLanguageNameChange} value={newCodeNameValue[1]} readOnly={!props.isEditing} disabled={!props.enabled} />
					</ErrorInput>

					{ ShowItem(props, newCodeNameValue[1], editLanguageError == undefined ? null : editLanguageError, SetEditLanguageError) }
				</div>
			</ErrorInput>
		</ErrorField>
	)

	// return(
	// 	<div className='column is-full'>




	// 		<div className='control'>
	// 			<ErrorField error={editLanguageError}>
	// 				<div className="field has-addons">
	// 					<p className="control">
	// 						<ErrorInput error={editLanguageError}>
	// 							{/* <input className="input" type="text" required={true} placeholder="Код ISO 639.2 Alpha-3" onChange={OnLanguageCodeChange} value={newCodeNameValue[0]} readOnly={!props.isEditing} disabled={!props.enabled}/> */}
	// 							<input className="input" type="text" required={true} placeholder="Код ISO 639.2 Alpha-3" value={newCodeNameValue[0]} readOnly={true} disabled={!props.enabled}/>
	// 						</ErrorInput>
	// 					</p>
	// 					<p className="control is-expanded">
	// 						<ErrorInput error={editLanguageError}>
	// 							<input className="input" type="text" required={true} placeholder="Название языка" onChange={OnLanguageNameChange} value={newCodeNameValue[1]} readOnly={!props.isEditing} disabled={!props.enabled} />
	// 						</ErrorInput>
	// 					</p>
	// 					{ ShowItem(props, newCodeNameValue[1], editLanguageError == undefined ? null : editLanguageError, SetEditLanguageError) }
	// 				</div>
	// 			</ErrorField>
	// 		</div>
			
	// 	</div>
	// )
}

function ShowItem(props: IListItem, newNameValue: string, editLanguageError: string | null, setEditLanguageError: (error: string | null) => void){
	// const isError = editLanguageError != null && editLanguageError.length > 0;
	const isError = !IsLanguageCodeValid(props.language.codeIso3) || !IsLanguageNameValid(newNameValue);
	if (props.isEditing){
		return (
			<>
				<ErrorInput error={editLanguageError} errorClassses={'btn-outline-danger'}>
					<button id={GetElementId('btn_edit_language_submit', props.language.id)} type="button" className='btn btn-success' disabled={isError}
						
						onClick={() => 
								{
									EditLanguage(props.language.id, props.language.codeIso3, newNameValue)
										// .then(() => props.forceRefresh())
										.then(() => {
											// console.log(`props.setEdited(${props.genre.id}, false)`)
											props.setEditing(props.language.id, false);
											props.forceRefresh();
										})
										.catch((error) => setEditLanguageError((error as Error)?.message));
								}
							}>
						{/* <span className="icon"><TfiCheck /></span> */}
						<span><TfiCheck /></span>
					</button>
				</ErrorInput>
				
				<ErrorInput error={editLanguageError} errorClassses={'btn-outline-danger'}>
					<button id={GetElementId('btn_edit_genre_reject', props.language.id)} type="button" className='btn btn-primary'
						onClick={() => {
							// console.log(`props.setEdited(${props.genre.id}, false)`)
							setEditLanguageError(null);
							props.setEditing(props.language.id, false);
						}}>
						<span><TfiClose /></span>
					</button>
				</ErrorInput>
			</>
		);
	}
	else if (props.isDeleting){
		return (
			<>
				<ErrorInput error={editLanguageError} errorClassses={'btn-outline-danger'}>
					<button id={GetElementId('btn_edit_genre_submit', props.language.id)} type="button" className='btn btn-danger'
						onClick={() => 
							{
								DeleteLanguage(props.language.id)
									.then(() => {
										// console.log(`props.setEdited(${props.genre.id}, false)`)
										props.setDeleting(props.language.id, false);
										props.forceRefresh();
									});
							}
						}>
							<span><TfiTrash /></span>
					</button>
				</ErrorInput>

				<ErrorInput error={editLanguageError} errorClassses={'btn-outline-danger'}>
					<button id={GetElementId('btn_edit_genre_reject', props.language.id)} type="button" className='btn btn-primary'
						onClick={() => props.setDeleting(props.language.id, false)}>
							<span><TfiClose /></span>
					</button>
				</ErrorInput>
			</>
		);
	}
	else{
		return (
			<>
				<ErrorInput error={editLanguageError} errorClassses={'btn-outline-danger'}>
					<button id={GetElementId('btn_switch_to_genre_edit_mode', props.language.id)} type="button" className='btn btn-primary' disabled={!props.enabled || isError}
						onClick={() => props.setEditing(props.language.id, true)}>
							<span><TfiPencil /></span>
					</button>
				</ErrorInput>

				<ErrorInput error={editLanguageError} errorClassses={'btn-outline-danger'}>
					<button id={GetElementId('btn_switch_to_genre_delete_mode', props.language.id)} type="button" className='btn btn-danger' disabled={!props.enabled}
						onClick={() => props.setDeleting(props.language.id, true)}>
							<span><TfiTrash /></span>
					</button>
				</ErrorInput>
			</>
		);
	}
}