import { ChangeEvent, useState } from 'react'
import { TfiCheck, TfiClose, TfiPencil, TfiTrash } from 'react-icons/tfi';
import { Genre } from '../../../../api/models/Types';
import { EditGenre, DeleteGenre } from '../../../../api/GenreApi';
import ErrorInput from '../../../common/error/ErrorInput';
import ErrorField from '../../../common/error/ErrorField';
import { GetElementId } from '../../../../common/Helper';

export interface IListItem{
	genre: Genre,
	isDeleting: boolean,
	isEditing: boolean,
	enabled: boolean,
	setEditing: (genreId: string, value: boolean) => void,
	setDeleting: (genreId: string, value: boolean) => void,
	forceRefresh: () => void,
}

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

export default function GenreItemEditComponent(props : IListItem) {
	const [editGenreError, SetEditGenreError] = useState<string | null>();
	
	const [inputValue, SetInputValue] = useState<string>(props.genre.name); 
	const OnGenreNameChange = (event : ChangeEvent<HTMLInputElement>) => SetInputValue(event.target.value);
	if (!props.isEditing && inputValue != props.genre.name) SetInputValue(props.genre.name);
	//let inputValue = props.genre.name;
	//const OnGenreNameChange = (event : ChangeEvent<HTMLInputElement>) => inputValue = event.target.value;
	// const OnGenreNameChange = (event : ChangeEvent<HTMLInputElement>) => {
	// 	console.log('Onchange: ' + event.target.value)
	// 	inputValue = event.target.value
	// };

	//SetInputValue(props.genre.name);
	return(

		<ErrorField error={editGenreError}>
			<ErrorInput error={editGenreError}>
				<div className="input-group">
					<ErrorInput error={editGenreError}>
					<input className="form-control" type="text" required={true} placeholder="Жанр" onChange={OnGenreNameChange} value={inputValue} readOnly={!props.isEditing} disabled={!props.enabled}/>
					</ErrorInput>

					{ ShowItem(props, inputValue, editGenreError == undefined ? null : editGenreError, SetEditGenreError) }
				</div>
			</ErrorInput>
		</ErrorField>
	)
}

function ShowItem(props: IListItem, newGenreValue: string, editGenreError: string | null, setEditGenreError: (error: string | null) => void){
	const isError = !IsGenreNameValid(newGenreValue);
	if (props.isEditing){
		return (
			<>
				<ErrorInput error={editGenreError} errorClassses={'btn-outline-danger'}>
					<button id={GetElementId('btn_edit_language_submit', props.genre.id)} type="button" className='btn btn-success' disabled={isError}
						
						onClick={() => 
								{
									EditGenre(props.genre.id, newGenreValue)
										// .then(() => props.forceRefresh())
										.then(() => {
											// console.log(`props.setEdited(${props.genre.id}, false)`)
											props.setEditing(props.genre.id, false);
											props.forceRefresh();
										})
										.catch((error) => setEditGenreError((error as Error)?.message));
								}
							}>
						{/* <span className="icon"><TfiCheck /></span> */}
						<span><TfiCheck /></span>
					</button>
				</ErrorInput>

				<ErrorInput error={editGenreError} errorClassses={'btn-outline-danger'}>
					<button id={GetElementId('btn_edit_genre_reject', props.genre.id)} type="button" className='btn btn-primary'
						onClick={() => {
							// console.log(`props.setEdited(${props.genre.id}, false)`)
							setEditGenreError(null);
							props.setEditing(props.genre.id, false);
						}}>
						<span><TfiClose /></span>
					</button>
				</ErrorInput>
			</>
		);
	}
	else if (props.isDeleting){
		return (
			<>
				<ErrorInput error={editGenreError} errorClassses={'btn-outline-danger'}>
					<button id={GetElementId('btn_edit_genre_submit', props.genre.id)} type="button" className='btn btn-danger'
						onClick={() => 
							{
								DeleteGenre(props.genre.id)
									.then(() => {
										// console.log(`props.setEdited(${props.genre.id}, false)`)
										props.setDeleting(props.genre.id, false);
										props.forceRefresh();
									});
							}
						}>
							<span><TfiTrash /></span>
					</button>
				</ErrorInput>

				<ErrorInput error={editGenreError} errorClassses={'btn-outline-danger'}>
					<button id={GetElementId('btn_edit_genre_reject', props.genre.id)} type="button" className='btn btn-primary'
						onClick={() => props.setDeleting(props.genre.id, false)}>
							<span><TfiClose /></span>
					</button>
				</ErrorInput>
			</>
		);
	}
	else{
		return (
			<>

				<ErrorInput error={editGenreError} errorClassses={'btn-outline-danger'}>
					<button id={GetElementId('btn_switch_to_genre_edit_mode', props.genre.id)} type="button" className='btn btn-primary' disabled={!props.enabled}
						onClick={() => props.setEditing(props.genre.id, true)}>
							<span><TfiPencil /></span>
					</button>
				</ErrorInput>

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