import React from 'react';
import PropTypes from 'prop-types';
import {Block} from './Block';
import {TabItem} from './TabItem';
import classnames from 'classnames';
import {NavDropdown} from './NavDropdown';
import {Icon} from './Icon';
import {ExternalLink} from './ExternalLink';

export class ToolsMenu extends React.Component {
    static contextTypes = {
        router: PropTypes.object
    };

    static propTypes = {
        columns: PropTypes.array.isRequired,
        onKeyDown: PropTypes.func,
        onSelect: PropTypes.func,
        isExternalLink: PropTypes.func,
        current: PropTypes.string
    };

    static defaultProps = {
        onKeyDown: e => {},
        onSelect: e => {},
        isExternalLink: url => /^(?:https?:)?\/\//.test(url),
        current: 'TRANSLATE:CURRENT'
    };

    renderMenuItem = item => {
        if (this.props.isExternalLink(item.href)) {
            return (
                <ExternalLink
                    id={item.menuTitle}
                    key={item.menuTitle}
                    href={item.href}
                    title={item.title}
                    tabIndex={-1}
                    onClick={item.onClick}
                    role="menuitem"
                    onKeyDown={this.props.onKeyDown}
                    withIcon
                />
            );
        }

        const {router} = this.context;
        const isCurrentPage = router ? router.isActive(item.href) : false;
        const labelForScreenReader = isCurrentPage ? (
            <span className="sr-only">{`, ${this.props.current}`}</span>
        ) : null;

        return (
            <TabItem
                role="menuitem"
                to={item.href}
                key={item.menuTitle}
                testAutomationId={item.menuTitle}
                tabIndex={-1}
                activeKey={item.menuTitle}
                className={classnames({active: isCurrentPage})}
                onKeyDown={this.props.onKeyDown}
                onSelect={this.props.onSelect}>
                {item.title}
                {labelForScreenReader}
            </TabItem>
        );
    };

    renderCategory = category => {
        const {title, items, id} = category;
        return (
            <Block
                key={`${id}Category`}
                testAutomationId={`${id}Category`}
                className="tools-category"
                role="group"
                aria-labelledby={`${id}CategoryTitle`}>
                <legend
                    data-test-automation-id="categoryName"
                    className="tools-category-title"
                    id={`${id}CategoryTitle`}>
                    {title}
                </legend>
                {items.map(this.renderMenuItem)}
            </Block>
        );
    };

    renderColumn = (categories, index) => {
        return (
            <div key={`column${index}`} className="tools-menu-column">
                {categories.map(this.renderCategory)}
            </div>
        );
    };

    render() {
        return (
            <div data-test-automation-id="toolsMenu" className="tools-menu">
                {this.props.columns.map(this.renderColumn)}
            </div>
        );
    }
}

export class ToolsDropdown extends React.Component {
    static contextTypes = {
        router: PropTypes.object
    };

    static propTypes = {
        title: PropTypes.string.isRequired,
        id: PropTypes.string.isRequired,
        items: PropTypes.array.isRequired,
        className: PropTypes.string,
        isExternalLink: PropTypes.func
    };

    static defaultProps = {
        className: '',
        isExternalLink: url => /^(?:https?:)?\/\//.test(url)
    };

    render() {
        const {id, title, className, items, isExternalLink} = this.props;
        const titleElement = (
            <span>
                {title}
                <Icon name="chevron-down-small" />
            </span>
        );

        return (
            <NavDropdown
                noCaret
                role="menu"
                id={id}
                key={id}
                className={className}
                data-test-automation-id={id}
                activeKey={id}
                title={titleElement}>
                <ToolsMenu columns={items} isExternalLink={isExternalLink} />
            </NavDropdown>
        );
    }
}
