import { ChangeEvent, useEffect, useState } from 'react'
import ErrorField from '../error/ErrorField';
import ErrorInput from '../error/ErrorInput';
import { TfiCheck, TfiPencil } from 'react-icons/tfi';
import { DateToString } from '../../../common/Helper';

export interface IDateEditComponent{
	date: Date | undefined | null,
	dataLoadingError: Error | null,
	placeholder?: string | undefined | null,
	required?: boolean | undefined | null,
	isEditing?: boolean | undefined | null,
	enabled?: boolean | undefined | null,
	editDate: (value: Date | null) => Promise<void>,
	setEditing: (value: boolean) => void,
	// setDeleting: (genreId: string, value: boolean) => void,
	forceRefresh: () => void,
}

export default function DateEditComponent(props: IDateEditComponent) {
	const [editDateError, SetEditDateError] = useState<string | null>();
	const [inputValue, SetInputValue] = useState<string | null | undefined>(null); 
	const OnValueChanged = (event : ChangeEvent<HTMLInputElement>) => {
		SetInputValue(event.target.value);
	};

	useEffect(() => {
		const v = DateToString(props.date);
		// SetInputValue(DateToString(props.date));
		SetInputValue(v);
		// if (editDateError != null && editDateError != ''){
		// 	const v = DateToString(props.date);
		// 	// SetInputValue(DateToString(props.date));
		// 	SetInputValue(v);
		// }
		// else{
		// 	console.log('a');
		// }
	}, [props, editDateError])
	
	//SetInputValue(props.genre.name);
	return(

		<ErrorField error={editDateError}>
			<ErrorInput error={editDateError}>
				<div className="input-group">
					{props.dataLoadingError == null &&
						<>
							<ErrorInput error={editDateError}>
								<input className="form-control" type="date"
									required={props.required == null ? false : props.required}
									placeholder={(props.placeholder == null || props.placeholder == '') ? 'Дата' : props.placeholder}
									readOnly={!props.isEditing}
									disabled={!props.enabled}
									onChange={OnValueChanged}
									value={inputValue ?? ''}
									/>
							</ErrorInput>
							{ ShowItem(props, inputValue, editDateError == undefined ? null : editDateError, SetEditDateError) }
						</>
					}
					{props.dataLoadingError != null &&
						<input type='text' className='form-control bg-danger' placeholder="Url" disabled={true} value={props.dataLoadingError.message ?? 'unknown'}/>
					}
				</div>
			</ErrorInput>
		</ErrorField>
	)
}

function ShowItem(props: IDateEditComponent, newDateValue: string | null | undefined, editGenreError: string | null, setEditGenreError: (error: string | null) => void){
	// const isError = !IsGenreNameValid(newDateValue);
	const isError = false;
	if (props.isEditing){
		return (
			<>
				<ErrorInput error={editGenreError} errorClassses={'btn-outline-danger'}>
					{/* <button id={GetElementId(`btn_edit_${props.componentName}_submit`, props.id)} type="button" className='btn btn-success' disabled={isError} */}
					<button type="button" className='btn btn-success' disabled={isError}
						onClick={() => 
								{
									if (newDateValue != props.date){
										props.editDate((newDateValue != undefined && newDateValue != null) ? new Date(newDateValue) : null)
											.then(() => {
												props.setEditing(false);
												props.forceRefresh();
											})
											.catch((error) => setEditGenreError((error as Error)?.message));
									}
									else {
										props.setEditing(false);
									}
								}
							}>
						<span><TfiCheck /></span>
					</button>
				</ErrorInput>
			</>
		);
	}
	else{
		return (
			<>
				<ErrorInput error={editGenreError} errorClassses={'btn-outline-danger'}>
					{/* <button id={GetElementId('btn_switch_to_genre_edit_mode', props.elementId)} type="button" className='btn btn-primary' disabled={!props.enabled} */}
					<button type="button" className='btn btn-primary' disabled={!props.enabled}
						onClick={() => props.setEditing(true)}>
							<span><TfiPencil /></span>
					</button>
				</ErrorInput>
			</>
		);
	}
}