import { AnimeTitleShort } from '../../../api/models/Types'
import MediaInfoComponent, { MediaInfoModel } from '../../common/view/MediaInfoComponent'
import RatingComponent  from '../../common/view/RatingComponent.tsx';

// import { atom, useAtom } from 'jotai';
import { useNavigate } from 'react-router-dom';
import GenreListView from '../../library/view/GenreListView';
import { GetTitleNames } from '../../common/view/NameComponent';
import { UserInfo } from '../../../api/models/AccountTypes';

// const expandedRatingAtom = atom<string | null>()

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

export default function AnimeTitleShortComponent(props: IAnimeTitleShortComponentProps) {
	// console.log(props.item.commonProperties.releaseDate);
	//const name = GetNameString(props.item.commonProperties.names, 'rus');
	// const [expandedRating, setExpandedRating] = useAtom(expandedRatingAtom);
	// const name = GetNameString(props.item.commonProperties.names, props.userLanguageId);
	const name = GetTitleNames(props.item.names, props.user?.languageId)?.titleElement;
	const navigate = useNavigate();
	const viewDetail = () => navigate(`/library/anime/${props.item.id}`);
	return (
		<article className='card p-0 h-100 bg-body-tertiary'>
			<div className='card-header container p-1 mb-1 overflow-x-auto overflow-y-scroll'
				role="button"
				style={{height: '3.2rem'}}
				onClick={viewDetail}>
				{/* <p className='card-heading is-size-6'>{name}</p> */}
				<p className='card-heading'>{name}</p>
			</div>

			{/* <hr /> */}
			<div className='row m-0'>
				{/* <div className='col-6 pe-0'> */}
				<div className='col-6'>
					<MediaInfoComponent mediaInfo={props.item.preview?.url == null ? null : {
							type: props.item.preview.type,
    						data: props.item.preview.url,
						} as MediaInfoModel}
						classes={'card-img-top rounded-3'}
						onClick={viewDetail}
						/>
				</div>
				<div className='col-6 w-50'>
					{/* <div className='row'>
						<div className='col-12 border'>
							<RateComponent
								ratePercentage={props.item.rate}
								userRatePercentage={props.item.myRate}
								// rates={}
								isExpanded={expandedRating == props.item.id}
								setExpanded={(expanded) => setExpandedRating(expanded && expandedRating != props.item.id ? props.item.id : null)}
								forceRefresh={props.forceRefresh}
								progressBarTextShowOption={ProgressBarTextOption.Fraction}/>
						</div>
					</div> */}
					<div className='row'>
						<div className='col-12 p-0'>
							<RatingComponent 
								user={props.user}
								rateObjectId={props.item.id}
								ratePercentage={props.item.rate}
								// rates?: Array<number> | null | undefined,
								userRatePercentage={props.item.myRate}
								setRate={props.setRate}
								deleteRate={props.deleteRate}
								forceRefresh={props.forceRefresh} />
						</div>
					</div>

					<div className='row'>
						<div className='col-6 border'>
							Дата выхода:
						</div>
						<div className='col border'>
							{props.item.releaseDate == null
								? '——//——'
								: new Date(props.item.releaseDate).toLocaleDateString('ru-RU', { year: 'numeric', month: '2-digit', day: '2-digit',}) }	
						</div>
					</div>
					<div className='row'>
						<div className='col-6 border'>
							Страна:
						</div>
						<div className='col border'>
							{/* {props.item.originCountry == null ?? 'Япония'} */}
							{'Япония'}
						</div>
					</div>
					<div className='row'>
						<div className='col-6 border'>
							Сезоны:
						</div>
						<div className='col border'>
							{props.item.seasonsCount}
						</div>
					</div>
					<div className='row'>
						<div className='col-6 border'>
							Эпизоды:
						</div>
						<div className='col border'>
							{props.item.episodesInsideSeasonsCount + (props.item.episodesCount > 0 ? (' + ' + props.item.episodesCount) : '')}
						</div>
					</div>
					<hr />
					<div className='flex-grow overflow-y-auto' style={{height:'10rem'}}>
						<GenreListView items={props.item.genres} />
					</div>
					{/* <div className='row'>
						<div className='col-6 border'>
							
						</div>
						<div className='col border'>
							{'Жанр1, Жанр2, Жанр3, Жанр4, Жанр5, Жанр6, Жанр7'}
						</div>
					</div> */}
				</div>
			</div>
			
			{/* <div className='container columns is-multiline'>
				<div className='column is-one-third'>
					<MediaInfoComponent mediaInfo={props.item.commonProperties.preview}/>
				</div>
				<div className='column pl-0'>
					

				</div>
			</div> */}

		</article>
  	)
}