import { GetTitleNames } from '../../common/view/NameComponent';
import MediaInfoComponent, { MediaInfoModel } from '../../common/view/MediaInfoComponent';
import NamesViewComponent from '../../common/view/NamesViewComponent';
import DescriptionViewComponent from '../../common/view/DescriptionViewComponent';
import GenreListView from '../../library/view/GenreListView';
import { AnimeTitleDetail} from '../../../api/models/Types';
import RatingComponent from '../../common/view/RatingComponent.tsx';
import { TfiPencil } from 'react-icons/tfi';
import { useNavigate } from 'react-router-dom';
import useUser from '../../../api/hooks/useUser';
import { useQuery } from 'react-query';
import { userQueryKey } from '../../common/UserShortComponent';
import { UserInfo } from '../../../api/models/AccountTypes';

export interface IAnimeTitleDetailComponentProps{
	user?: UserInfo | null | undefined,
	animeTitle: AnimeTitleDetail,
	setRate: (value: number | null) => Promise<string | undefined>,
	deleteRate: () => Promise<string | undefined>,
	forceRefresh?: () => void,
}

export default function AnimeTitleDetailComponent(props: IAnimeTitleDetailComponentProps) {
	const { getUser } = useUser();
	const { data: user } = useQuery(userQueryKey, getUser);
	const titleNames = GetTitleNames(props.animeTitle.commonProperties.names, props.user?.languageId);
	const navigate = useNavigate();
	const goToEditPage = () => navigate(`/admin/library/anime/${props.animeTitle.id}/edit`);
	const canUserEdit = user != null;
	// const canUserEdit = true;
	return (
		<article className='content w-100'>
			{!canUserEdit &&
				<h3 className='text-primary'>{titleNames?.titleElement}</h3>
			}
			{canUserEdit &&
				<div className='row'>
					<div className='col'>
						<h3 className='text-primary'>{titleNames?.titleElement}</h3>
					</div>
					<div className='col-auto me-1'>
						<div className='btn btn-primary' onClick={goToEditPage}>
							<TfiPencil />
						</div>
					</div>
				</div>
			}

			<div className='row'>
				<div className='col-4'>
					<MediaInfoComponent mediaInfo={props.animeTitle.commonProperties.preview?.url == null ? null : {
							type: props.animeTitle.commonProperties.preview.type,
    						data: props.animeTitle.commonProperties.preview.url,
						} as MediaInfoModel}
						classes={'card-img-top rounded-3 border border-5 border-secondary'}
						/>

					<div className='card p-0 mt-2'>
						{/* <div className='card-header'>
							<h3 className='card-heading'>Жанры</h3>
						</div> */}
						<div className='card-body p-0'>
							{/* {data.commonProperties.genres.length > 0 &&
								<GenreListView items={data.commonProperties.genres} />
							}
							{data.commonProperties.genres.length == 0 &&
								<span>— — // — —</span>
							} */}
							<div className='table-responsive'>
								{/* <table className="table m-0 table-bordered"> */}
								<table className="table m-0">
									{/* <thead>
										<tr>
											<th scope="col">#</th>
											<th scope="col">First</th>
											<th scope="col">Last</th>
											<th scope="col">Handle</th>
										</tr>
									</thead> */}
									<tbody>
										<tr>
											{/* <th className='text-nowrap'>Дата анонса</th>
											<td className='w-100 text-center'>{data.commonProperties.announcementDate?.toString() ?? '—//—'}</td> */}
											<th>Дата анонса</th>
											<td className='text-end'>{props.animeTitle.commonProperties.announcementDate?.toString() ?? '—//—'}</td>
										</tr>
										<tr>
											{/* <th className='text-nowrap'>Предполагаемая дата выхода</th>
											<td className='w-100 text-center'>{data.commonProperties.estimatedReleaseDate?.toString() ?? '—//—'}</td> */}
											<th>Предполагаемая дата выхода</th>
											<td className='text-end'>{props.animeTitle.commonProperties.estimatedReleaseDate?.toString() ?? '—//—'}</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>

				</div>
				<div className='col p-0 pe-2'>
					<div className='card p-0'>
						{/* <div className='card-header'>
							<h3 className='card-heading'>Оценка</h3>
						</div> */}
						<RatingComponent 
							user={props.user}
							rateObjectId={props.animeTitle.id}
							ratePercentage={props.animeTitle.rate}
							// rates?: Array<number> | null | undefined,
							userRatePercentage={props.animeTitle.myRate}
							setRate={props.setRate}
							deleteRate={props.deleteRate}
							forceRefresh={props.forceRefresh}
							/>
						{/* <div className='card-body'>
							<div className='row'>
								<div className='col'>Оценка</div>
							</div>
							<div className='row border-top px-2'>
								{data.commonProperties.genres.length > 0 &&
									<GenreListView items={data.commonProperties.genres} />
								}
								{data.commonProperties.genres.length == 0 &&
									<span>— — // — —</span>
								}
							</div>
						</div> */}
					</div>

					<NamesViewComponent names={props.animeTitle.commonProperties.names} excludeNames={titleNames?.namesUsed ?? []} userLanguageId={props.user?.languageId} />
					<DescriptionViewComponent descriptions={props.animeTitle.commonProperties.descriptions} userLanguageId={props.user?.languageId} />
					
					<div className='card p-0'>
						<div className='card-header'>
							<h3 className='card-heading'>Жанры</h3>
						</div>
						<div className='card-body'>
							{props.animeTitle.commonProperties.genres.length > 0 &&
								<GenreListView items={props.animeTitle.commonProperties.genres} />
							}
							{props.animeTitle.commonProperties.genres.length == 0 &&
								<span>— — // — —</span>
							}
						</div>
					</div>

				</div>
				<div className='col-3'>
					<div className='card p-0'>
						<div className='card-header'>
							<h3 className='card-heading'>Заметка</h3>
						</div>
						<div className='card-body'>
							{props.animeTitle.commonProperties.genres.length > 0 &&
								<GenreListView items={props.animeTitle.commonProperties.genres} />
							}
							{props.animeTitle.commonProperties.genres.length == 0 &&
								<span>— — // — —</span>
							}
						</div>
					</div>
					<br />
					<div className='card p-0'>
						<div className='card-header'>
							<h3 className='card-heading'>Ссылки</h3>
						</div>
						<div className='card-body'>
							{props.animeTitle.commonProperties.genres.length > 0 &&
								<GenreListView items={props.animeTitle.commonProperties.genres} />
							}
							{props.animeTitle.commonProperties.genres.length == 0 &&
								<span>— — // — —</span>
							}
						</div>
					</div>
				</div>
			</div>
			<hr />
			<div className='bg-success'>
				<div>Содержимое</div>
				<div>сезоны</div>
				<div>эпизоды</div>
			</div>
		</article>
  	)
}
