import { IconAction } from "@ax/components";
import { useModal } from "@ax/hooks";

import { DeleteKeywordsModal } from "../atoms";

import * as S from "./style";

const KeywordItem = (props: IKeywordItemProps) => {
	const { keyword, count, isSelected, onClick, deleteKeyword } = props;

	const { isOpen, toggleModal } = useModal();

	const handleDeleteKeyword = (e: React.MouseEvent) => {
		e.stopPropagation();
		if (count > 0) {
			toggleModal();
		} else {
			deleteKeyword(keyword);
		}
	};

	return (
		<>
			<S.KeywordItem tabIndex={0} role="button" onClick={onClick} isSelected={isSelected}>
				<S.KeyName>{keyword}</S.KeyName>
				<S.ActionsWrapper>
					<S.Counter isZero={!count}>{count} used</S.Counter>
					<S.IconWrapper>
						<IconAction icon="delete" size="s" onClick={handleDeleteKeyword} />
					</S.IconWrapper>
				</S.ActionsWrapper>
			</S.KeywordItem>
			<DeleteKeywordsModal isOpen={isOpen} toggleModal={toggleModal} deleteKeyword={() => deleteKeyword(keyword)} />
		</>
	);
};

interface IKeywordItemProps {
	keyword: string;
	count: number;
	isSelected: boolean;
	onClick: () => void;
	deleteKeyword: (keyword: string) => void;
}

export default KeywordItem;
