import React from 'react'
import AnimeTitleShortComponent from './AnimeTitleShortComponent';
import { QueryClient, useQuery, useQueryClient } from 'react-query';
import { GetAnimeTitleList, VoteAnimeTitle, UnvoteAnimeTitle } from '../../../api/AnimeTitleApi';
import { AnimeTitle, VoteDeleteModel, VoteEditModel } from '../../../api/models/Types';
import axios, { AxiosInstance } from 'axios';

const queryKey = 'anime_titles';

export default function AnimeTitleListComponent() {
	const client = axios.create();
	const { data, isLoading, isError } = useQuery(queryKey, () => GetAnimeTitleList(client));
	const queryClient = useQueryClient();
	// const [expandedRate, SetRateExpanded] = useState<titleId: string, expanded: boolean]>();
	return (
		<div className='row g-2'>
			{isLoading &&
				<div>Загрузка...</div>
			}
			{isError &&
				<div>Ошибка загрузки данных</div>
			}
			{!isLoading && !isError &&
				ShowAnimeTitles(client, data, queryClient)
			}
		</div>
  	)
}

function ShowAnimeTitles(client: AxiosInstance, data: Array<AnimeTitle> | undefined, queryClient: QueryClient){
	// if (data) return React.Children.toArray(
	// 	data.map((item: AnimeTitle) => 
	// 	<div className='col-4'>
	// 		<AnimeTitleShortComponent item={item} />
	// 	</div>
	// 	)
	// );
	if (data) return React.Children.toArray(
		data.map((item: AnimeTitle) => 
		<>
			<div className='col-4'>
				<AnimeTitleShortComponent
					forceRefresh={() => InvalidateTitles(queryClient)}
					userLanguageId={'2c16c758-bd85-42e9-9e0e-3bc4e382aa47'}
					// item={TestRating(item)} />
					setRate={(value) => {
						// console.log(`Set rate (${value == null ? 'null' : value}) of [${rateObjectId}]`);
						if (value != null){
							return VoteAnimeTitle(client, {
								animeTitleId: item.id,
								animeSeasonId: null,
								animeEpisodeId: null,
								ratingPercentage: value
							} as VoteEditModel);
						}
						else{
							return UnvoteAnimeTitle(client, {
								animeTitleId: item.id,
								animeSeasonId: null,
								animeEpisodeId: null,
							} as VoteDeleteModel);
						}
					}}
					deleteRate={() => {
						// console.log(`Delete rate of [${rateObjectId}]`);
						return UnvoteAnimeTitle(client, {
							animeTitleId: item.id,
							animeSeasonId: null,
							animeEpisodeId: null,
						} as VoteDeleteModel);
					}}
					item={item} />
			</div>
			<div className='col-4'>
				<AnimeTitleShortComponent
					forceRefresh={() => InvalidateTitles(queryClient)}
					setRate={(value) => {
						// console.log(`Set rate (${value == null ? 'null' : value}) of [${rateObjectId}]`);
						if (value != null){
							return VoteAnimeTitle(client, {
								animeTitleId: item.id,
								animeSeasonId: null,
								animeEpisodeId: null,
								ratingPercentage: value
							} as VoteEditModel);
						}
						else{
							return UnvoteAnimeTitle(client, {
								animeTitleId: item.id,
								animeSeasonId: null,
								animeEpisodeId: null,
							} as VoteDeleteModel);
						}
					}}
					deleteRate={() => {
						// console.log(`Delete rate of [${rateObjectId}]`);
						return UnvoteAnimeTitle(client, {
							animeTitleId: item.id,
							animeSeasonId: null,
							animeEpisodeId: null,
						} as VoteDeleteModel);
					}}
					item={item} />
			</div>
		</>
		)
	);
	else return (<div>Нет элементов</div>);
}

// function TestRating(item: AnimeTitle){
// 	const clone = structuredClone(item);
// 	clone.rate = 70;
// 	clone.myRate = 80;
// 	return clone;
// }

function InvalidateTitles(queryClient: QueryClient) { queryClient.invalidateQueries({ queryKey: [queryKey] }); }