import { useEffect, useState } from "react";

import { FloatingPanel, Icon, Toast } from "@ax/components";
import { useModal, useToast } from "@ax/hooks";

import { AddKeywordsModal } from "./atoms";
import KeywordItem from "./KeywordItem";
import { countKeywords } from "./utils";

import * as S from "./style";

const KeywordsPreviewModal = (props: IKeywordsPreviewProps) => {
	const { isOpen, browserRef, keywords, keywordsFilter, toggleModal, setKeywordsFilter, addKeywords, deleteKeyword } =
		props;
	const [keywordCounts, setKeywordCounts] = useState<Record<string, number>>({});
	const [deletedKeyword, setDeletedKeyword] = useState<string | null>(null);
	const { isOpen: isAddOpen, toggleModal: toggleAddModal } = useModal();
	const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();

	useEffect(() => {
		if (isOpen && browserRef.current) {
			const keywordCount = countKeywords(browserRef.current, keywords);
			setKeywordCounts(keywordCount);
		}
	}, [isOpen, browserRef, keywords]);

	const handleDeleteTag = () => setKeywordsFilter([]);

	const handleAddTag = (tag: string) => () =>
		keywordsFilter.includes(tag) ? setKeywordsFilter([]) : setKeywordsFilter([tag]);

	useEffect(() => {
		if (deletedKeyword && !keywords.includes(deletedKeyword)) {
			toggleToast("1 Keyword deleted");
			setDeletedKeyword(null);
		}
	}, [keywords, deletedKeyword, toggleToast]);

	const handleDeleteKeyword = (value: string) => {
		setDeletedKeyword(value);
		deleteKeyword(value);
		setKeywordsFilter([]);
	};

	const handleCloseModal = () => {
		setKeywordsFilter([]);
		toggleModal();
	};

	const handleAddKeywords = (value: string[]) => {
		setKeywordsFilter([]);
		addKeywords(value);
	};

	return (
		<S.Wrapper>
			<FloatingPanel title="Keywords" toggleModal={handleCloseModal} closeOnOutsideClick={false} isOpen={isOpen} width={358}>
				{isOpen && (
					<S.KeywordsWrapper>
						{keywordsFilter.length > 0 && (
							<S.FilterWrapper>
								<S.FilterText>Show keyword:</S.FilterText>
								<S.TagList>
									{keywordsFilter.map((tag: string) => {
										return <S.StyledTag key={tag} text={tag} color="#FFFFFF" onDeleteAction={handleDeleteTag} />;
									})}
								</S.TagList>
							</S.FilterWrapper>
						)}
						<S.KeywordsListWrapper>
							{keywords.length === 0 && <S.StyledSummaryButton />}
							{keywords.map((keyword, index) => {
								const isSelected = keywordsFilter.includes(keyword);
								return (
									<KeywordItem
										keyword={keyword}
										count={keywordCounts[keyword] ?? 0}
										isSelected={isSelected}
										onClick={handleAddTag(keyword)}
										deleteKeyword={handleDeleteKeyword}
										key={`${keyword}-${index}`}
									/>
								);
							})}
							<S.AddKeywordButton onClick={toggleAddModal}>
								<Icon name="add" size="16" />
								Add new keyword
							</S.AddKeywordButton>
						</S.KeywordsListWrapper>
					</S.KeywordsWrapper>
				)}
			</FloatingPanel>
			<AddKeywordsModal isOpen={isAddOpen} toggleModal={toggleAddModal} addNewKeyword={handleAddKeywords} />
			{isVisible && <Toast message={toastState} setIsVisible={setIsVisible} />}
		</S.Wrapper>
	);
};

interface IKeywordsPreviewProps {
	isOpen: boolean;
	browserRef: React.RefObject<HTMLDivElement>;
	toggleModal: () => void;
	keywords: string[];
	keywordsFilter: string[];
	setKeywordsFilter: (value: string[]) => void;
	addKeywords: (value: string[]) => void;
	deleteKeyword: (value: string) => void;
}

export default KeywordsPreviewModal;
