import { SearchedUserFilesList } from '@/app/ui/search/searched-user-files-list';
import { SearchedGlobalFilesList } from '@/app/ui/search/searched-global-files-list';
import { useCallback, useState, useImperativeHandle } from 'react';
import { searchUserFiles, searchGlobalFiles } from '@/app/actions/fileEntity';

export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: any }) {
	const [searchedUserFiles, setSearchedUserFiles] = useState<string[]>([]);
	const [searchedGlobalFiles, setSearchedGlobalFiles] = useState<string[]>([]);

	useImperativeHandle(ref, () => ({
		doSomething: () => {
			setSearchedUserFiles([]);
			setSearchedGlobalFiles([])
		}
	}));


	const handlerSearchUserFile = useCallback(async (fileId: string): Promise<void> => {

		try {
			let result = await searchUserFiles(fileId);

			if (result.content.length) {
				setSearchedUserFiles(result.content);
			}
		} catch (error) {

		}

	}, [fileId])

	const handlerSearchGlobalFile = useCallback(async (fileId: string): Promise<void> => {

		try {
			let result = await searchGlobalFiles(fileId);
			if (result.images.length) {
				setSearchedGlobalFiles(result.images);
			}
		} catch (error) {

		}

	}, [fileId])

	return (
		<>
			<div
				className="mb-4"
			>
				<button
					className="btn btn-primary btn-search"
					disabled={fileId ? false : true}
					onClick={() => {
						if (fileId) {
							handlerSearchUserFile(fileId)
						}
					}}
				>
					Начать поиск
				</button>
			</div>

			{(searchedUserFiles.length !== 0) && (
				<SearchedUserFilesList list={searchedUserFiles} />

			)}

			<div
				className="global-search-section"
			>
				<div className="global-search-header">
					<div className="global-search-title">
						Глобальный поиск изображений
					</div>
					<div className="">
						Найти где ещё используется ваше изображение в интернете
					</div>
					<div className="global-search-badge">
						Интернет поиск
					</div>
				</div>


				<div className="global-search-content">
					<div className="global-search-info">
						<div className="global-search-info-title">
							Поиск по всему интернету
						</div>
						<div className="global-search-info-text">
							Используем продвинутые технологии обратного поиска по изображению для поиска копий вашего контента
							на сайтах, в социальных сетях и других источниках. Поможет обнаружить несанкционированное использование.
						</div>
					</div>

					<div className="search-counter" id="search-counter">
						<div className="counter-info">
							<div className="counter-icon" id="counter-icon"></div>
							<div className="counter-text">
								<div className="counter-label">Глобальных поисков сегодня</div>
								<div className="counter-value" id="counter-value">0 из 10</div>
							</div>
						</div>
						<div className="progress-bar">
							<div
								className="progress-fill"
								id="progress-fill"
								style={{ width: '0%' }}
							>
							</div>
						</div>
					</div>

					<button
						type="button"
						className="global-search-btn"
						id="global-search-btn"
						onClick={() => {
							if (fileId) {
								handlerSearchGlobalFile(fileId)
							}
						}}
					>
						Найти в интернете
					</button>

					<div className="global-loading" id="global-loading">
						<div className="global-spinner"></div>
						<div className="global-loading-text" id="global-loading-text">
							Поиск изображений в интернете...
						</div>
					</div>

					<div className={`global-result ${searchedGlobalFiles.length ? 'show' : ''}`} id="global-result">
						<div className="global-result-card">
							<div className="global-result-header">
								<span>Найдено в интернете</span>
							</div>
							<div className="global-result-content">
								<SearchedGlobalFilesList list={searchedGlobalFiles} />
							</div>
						</div>
					</div>

					<div className="global-no-result" id="global-no-result">
						<div className="global-no-result-icon">&zwj;</div>
						<h4>Похожие изображения в интернете не найдены</h4>
						<p>Это может означать, что ваше изображение уникально и не используется на других сайтах.</p>
					</div>

					<div className="global-error" id="global-error">
						<strong>Ошибка глобального поиска:</strong>
						<span id="global-error-text"></span>
					</div>
				</div>
			</div>
		</>
	)
}