import React, {useCallback, useEffect, useMemo, useState, useRef} from 'react'
import PropTypes from 'prop-types'
import TextInput from 'react-uikit/input-text'
import Tooltip from 'react-uikit/tooltip'
import ResponsiveIFrame from 'components/responsive-iframe'
import {uuid} from 'common-fe/utils'
import {BLOCKS} from '../../config'
import BEMModule from 'utils/bem'
import styles from './styles.scss'

const bem = new BEMModule(styles)

const Media = ({attributes, editor, isSelected, node}) => {
    const src = node.data.get('src')
    const [source, setSource] = useState(src)

    // Use references in order to manually trigger tooltips
    const container = useRef()
    const tooltip = useRef()
    const isEditing = editor && !editor?.props?.readOnly
    const isVideoType = node.type === BLOCKS.VIDEO

    useEffect(() => {
        if (isSelected) {
            tooltip.current?.show(container.current)
        } else {
            tooltip.current?.hide(container.current)
        }
    }, [isSelected])

    const change = useCallback((src) => setSource(src), [])
    const update = useCallback(
        (src) => editor.setNodeByKey(node.key, {data: {src}}),
        [editor, node.key]
    )

    // eslint-disable-next-line
    const classes = bem.classNames('c-editor-media', {
        editing: isEditing,
        selected: isSelected,
    })
    const componentClasses = bem.classNames('c-editor-media__component', {
        editing: isEditing,
    })
    const iconClasses = bem.classNames(
        'c-editor-media__placeholder__icon',
        'material-icons'
    )
    const placeholderClasses = bem.classNames('c-editor-media__placeholder', {
        editing: isEditing,
    })
    const tooltipClasses = bem.classNames('c-editor-media__tooltip')
    const tooltipId = useMemo(() => `embed-${uuid()}`, [])

    const Component = isVideoType ? ResponsiveIFrame : 'img'
    const inputLabel = isVideoType ? 'Video URL' : 'Image URL'
    const inputPlaceholder = isVideoType
        ? 'Enter the URL for a embedded video'
        : 'Enter the URL for an image'

    return (
        <div
            className={classes}
            {...attributes}
            data-tip=""
            data-for={tooltipId}
            data-event={false}
            ref={container}
        >
            {src ? (
                <Component className={componentClasses} src={src} />
            ) : (
                <div className={placeholderClasses}>
                    {isEditing && (
                        <i className={iconClasses}>
                            {isVideoType ? 'videocam' : 'photo'}
                        </i>
                    )}
                </div>
            )}

            {isEditing && (
                <Tooltip
                    id={tooltipId}
                    className={tooltipClasses}
                    clickable
                    isAnchored
                    isDark
                    ref={tooltip}
                >
                    <TextInput
                        label={inputLabel}
                        placeholder={inputPlaceholder}
                        size="small"
                        type="url"
                        value={source}
                        onChange={change}
                        onUpdate={update}
                    />
                </Tooltip>
            )}
        </div>
    )
}

Media.propTypes = {
    attributes: PropTypes.object,
    editor: PropTypes.object,
    isSelected: PropTypes.bool,
    node: PropTypes.object,
}

export default Media