import React, { useEffect, useRef, useState } from 'react';
import { useIntl } from 'react-intl';
import { Editor } from '@tiptap/react';

import getTrad from '../../../utils/getTrad';
import useButton from './useButton';
import * as S from './styles';

export interface ButtonProps {
	identifier: string;
	editor: Editor;
	toggleMediaLibrary: () => void;
}

const Button = ({ identifier, editor, toggleMediaLibrary }: ButtonProps): JSX.Element => {
	const { formatMessage } = useIntl();
	const dropdownRef = useRef<any>(null);
	const props = useButton({ identifier, editor, toggleMediaLibrary });

	const [dropdownOpen, setDropdownOpen] = useState(false);

	const toggleDropdown = () => {
		setDropdownOpen(!dropdownOpen);
	};

	useEffect(() => {
		function handleClickOutside(event: MouseEvent) {
			if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
				setDropdownOpen(false);
			}
		}

		document.addEventListener('mousedown', handleClickOutside);
		return () => {
			document.removeEventListener('mousedown', handleClickOutside);
		};
	}, [dropdownRef]);

	if (props?.dropdown && props.dropdown.length > 0) {
		return (
			<S.DropdownContainer ref={dropdownRef}>
				<S.ActiveButton
					label={formatMessage({
						id: getTrad(`tiptap.toolbar.${identifier.toLocaleLowerCase()}`),
						defaultMessage: identifier
					})}
					{...props}
					onClick={toggleDropdown}
				/>
				{dropdownOpen && (
					<S.DropdownMenu>
						{props.dropdown.map((item, key) => {
							return (
								<S.ActiveButton
									key={key}
									label={formatMessage({
										id: getTrad(`tiptap.toolbar.${identifier.toLocaleLowerCase()}`),
										defaultMessage: identifier
									})}
									{...item}
									active={false}
								/>
							);
						})}
					</S.DropdownMenu>
				)}
			</S.DropdownContainer>
		);
	}

	return (
		<S.ActiveButton
			label={formatMessage({
				id: getTrad(`tiptap.toolbar.${identifier.toLocaleLowerCase()}`),
				defaultMessage: identifier
			})}
			{...props}
		/>
	);
};

export default Button;