import React, { useEffect, useRef, useState } from 'react';
import Container from 'react-bootstrap/Container';
import { useFocusedElement } from '../FocusedElement';

export type Props = {
    title: string,
    icon?: string,
    tags: string[],
    style?: 'primary' | 'light'
}

function Tag(props: {text: string}) {
    const tagKey = 'tag_' + props.text;
    const {elementRef, focusedClass, focusElement} = useFocusedElement(tagKey)
    return (
        <span ref={elementRef}
            onClick={focusElement}
            className={`badge text-bg-light ${focusedClass}`}>{props.text}</span>
    )
}

export default function TagCloud(props: Props) {
    const containerClasses = ['tag-cloud', 'cloud-' + (props.style || 'standard')]
    return (
        <Container className={containerClasses.join(' ')}>
            <h4>{props.icon && (<i className={'bi-' + props.icon}> </i>)}{props.title}</h4>
            <Container className='tag-badges'>
                {props.tags.map((tag: string) => (<Tag key={tag} text={tag} />) )}
            </Container>
        </Container>
    )
}