import React, { FC, useState, useRef, useEffect } from 'react';
import { Overlay, Popover, Button, InfoGlyph } from '@orchard/frontend-react-components';
import { formatMessage } from '@orchard/frontend-localization';
import { Source } from 'src/definitions/Sources';
import { SourceType } from 'src/constants/stores';
import { CLASSNAME } from './constants';
import SourcesStatusTable from './SourcesTable';
import PopoverHeader from './PopoverHeader';
import PopoverFooter from './PopoverFooter';

export interface Props {
    id: string;
    sources: Source[];
    sourceTypes: SourceType[];
}

export const CLASSNAME_TRIGGER = `${CLASSNAME}-trigger`;
export const CLASSNAME_TRIGGER_ICON = `${CLASSNAME}-trigger-icon`;
export const TERM_TRIGGER_LABEL = 'sources.linkLabel';

const SourcesStatus: FC<Props> = ({ id, sources, sourceTypes }) => {
    const [show, setShow] = useState(false);
    const containerRef = useRef<HTMLDivElement>(null);
    const triggerRef = useRef(null);

    const togglePopover = (event: React.MouseEvent) => {
        event.preventDefault();
        setShow(!show);
    };

    const hidePopup = (event: Event) => {
        if (containerRef.current && !containerRef.current.contains(event.target as Element))
            setShow(false);
    };

    const captureEscape = (event: KeyboardEvent) => {
        if (event.key === 'Escape' || event.key === 'Esc')
            setShow(false);
    };

    const removeEventHandlers = () => {
        document.removeEventListener('click', hidePopup, true);
        document.removeEventListener('keydown', captureEscape, true);
    };

    useEffect(() => {
        if (show) {
            document.addEventListener('click', hidePopup, true);
            document.addEventListener('keydown', captureEscape, true);
        } else
            removeEventHandlers();
        return () => removeEventHandlers();
    }, [show]);

    return (
        <div className={CLASSNAME} ref={containerRef}>
            <Button
                className={CLASSNAME_TRIGGER}
                onClick={togglePopover}
                disabled={sources.length === 0}
                variant="link"
                size="sm"
            >
                <span>{formatMessage(TERM_TRIGGER_LABEL)}</span>
                <span className={CLASSNAME_TRIGGER_ICON} ref={triggerRef}>
                    <InfoGlyph />
                </span>
            </Button>

            <Overlay
                show={show}
                target={triggerRef.current || undefined}
                placement="top"
                container={containerRef.current || undefined}
            >
                <Popover id={`${CLASSNAME}-${id}`}>
                    <PopoverHeader onClose={() => setShow(false)} />
                    <SourcesStatusTable sources={sources} sourceTypes={sourceTypes} />
                    <PopoverFooter />
                </Popover>
            </Overlay>
        </div>
    );
};

export default SourcesStatus;