import {TfiPencil, TfiTrash} from "react-icons/tfi";
import {UserInfo} from "../../../../../api/models/AccountTypes"
import {Episode, NameItem, Season} from "../../../../../api/models/Types"
import MediaInfoComponent, {MediaInfoModel} from "../../../../common/view/MediaInfoComponent"
import {GetTitleNames} from "../../../../common/view/NameComponent";
import {DateToString, GetDate} from "../../../../../common/Helper";
import {TimespanFromTicks} from "../../../../common/TimespanComponent.tsx";

export interface IAnimeSeasonsShortComponentProps{
	animeItem: Season | Episode,
	user: UserInfo,
	goToDetailPage: () => void
	goToEditPage?: () => void | undefined
	deleteItem?: () => void | null | undefined,
}

export default function AnimeItemShortComponent(props: IAnimeSeasonsShortComponentProps) {	
	const isSeason = props.animeItem.$type.toLowerCase() == 'season';
	const name = Name(props.animeItem.commonProperties.names, props.user.languageId);
	
	return (
		<div className='row mb-2 border rounded py-2 bg-body-secondary'>
			{props.animeItem.commonProperties.preview != null &&
				<div className='col-1'>
					<MediaInfoComponent mediaInfo={props.animeItem.commonProperties.preview?.url == null ? null : {
						type: props.animeItem.commonProperties.preview.type,
						data: props.animeItem.commonProperties.preview.url,
					} as MediaInfoModel}
										classes={'card-img-top rounded-3 border border-5 border-secondary'}
					/>

				</div>
			}
			<div className="col">
				<div className="row justify-content-between">
					<div className='col-auto align-self-center'>
						<h4 className='text-primary m-0' role='button' onClick={() => props.goToDetailPage?.()}>
							{/*{isSeason ? 'Сезон' : 'Эпизод'} {animeItem.number} ({animeItem.order}).*/}
							{/*{isSeason ? 'Сезон' : 'Эпизод'} {props.animeItem.number}{(props.animeItem.variant != null ? `(${props.animeItem.variant})` : '')}. {props.animeItem.commonProperties.names.length > 0 && <>{name}</>}*/}
							{isSeason ? 'Сезон' : 'Эпизод'} {props.animeItem.number}. {props.animeItem.commonProperties.names.length > 0 && <>{name}</>}
						</h4>
					</div>
					<div className='col-auto'>
						<div className='row'>
							<div className='col-auto'>
								{/* <span className='me-2'>season.hasViews: {animeItem. ? 'TRUE' : 'FALSE'}</span> */}
								<div className='btn btn-primary' onClick={() => props.goToEditPage?.()}>
									<TfiPencil/>
								</div>
							</div>
							<div className='col-auto'>
								{/* <span className='me-2'>season.hasViews: {animeItem. ? 'TRUE' : 'FALSE'}</span> */}
								<div className='btn btn-danger' onClick={() => props.deleteItem?.()}>
									<TfiTrash/>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div className="row">
					<div className='card p-0 mt-2'>
						<div className='card-body p-0'>
							<div className='table-responsive'>
								<table className="table m-0">
									<tbody>
									{isSeason &&
										<>
											<tr>
												<th>Дата анонса</th>
												<td className='text-end'>{Date(props.animeItem.commonProperties.announcementDate)}</td>
											</tr>
											<tr>
												<th>Предполагаемая дата выхода</th>
												<td className='text-end'>{Date(props.animeItem.commonProperties.estimatedReleaseDate)}</td>
											</tr>
											{props.animeItem.commonProperties.releaseDate != null &&
												<tr>
													<th>Дата выхода</th>
													<td className='text-end'>
														{Date(props.animeItem.commonProperties.releaseDate)}
													</td>
												</tr>
											}
										</>
									}
									{!isSeason &&
										<>
											{props.animeItem.commonProperties.announcementDate != null &&
												<tr>
													<th>Дата анонса</th>
													<td className='text-end'>
														{Date(props.animeItem.commonProperties.announcementDate)}
													</td>
												</tr>
											}
											{props.animeItem.commonProperties.estimatedReleaseDate != null &&
												<tr>
													<th>Предполагаемая дата выхода</th>
													<td className='text-end'>
														{Date(props.animeItem.commonProperties.estimatedReleaseDate)}
													</td>
												</tr>
											}
											<tr>
												<th>Дата выхода</th>
												<td className='text-end'>
													{Date(props.animeItem.commonProperties.releaseDate)}
												</td>
											</tr>
											<tr>
												<th>Длительность:</th>
												<td className='text-end'>
													{ShowDuration((props.animeItem as Episode)?.durationTicks)}
												</td>
											</tr>
										</>
									}
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	)
}

function Name(names: Array<NameItem>, languageId: string | null | undefined) {
	return GetTitleNames(names, languageId, true)?.titleElement;
}

function Date(date: string | null | undefined) {
	return date != null ? DateToString(GetDate(date)) : '—//—';
}

function ShowDuration(ticks: number | null | undefined) {
	const timespan = TimespanFromTicks(ticks);
	return (
		<>
			{TimePartToStringWith(timespan?.hours)}:{TimePartToStringWith(timespan?.minutes)}:{TimePartToStringWith(timespan?.seconds)}
		</>
	)
}

function TimePartToStringWith(number: number | null | undefined): string {
	
	return number?.toString().padStart(2, '0') ?? '--';
}