/**
 * Drop-down list item
 *
 * @author Brauer Ilya
 * @date 2020-03-02
 */

import * as React from 'react';
import * as styles from './dropdown.m.scss';
import {renderIcon} from '../../utils/renderIcon';
import {createHtmlPropsFilter} from '../../utils/createHtmlPropsFilter';
import {joinClassNames} from '../../utils/joinClassNames';
import {Tooltip} from '../tooltip/Tooltip';
import {PLACEMENT, INTENT} from '../../constants';
import {safeInvoke} from '../../utils/safeInvoke';
import {getIntentThemeKey} from '../../utils/getIntentThemeKey';

type IProps = React.HTMLAttributes<HTMLDivElement> & {
    isMinimal?: boolean;
    isDisabled?: boolean;
    isReadonly?: boolean;
    isHeader?: boolean;
    rightIcon?: React.ReactNode;
    leftIcon?: React.ReactNode;
    forwardRef?: React.Ref<HTMLDivElement>;
    'data-qaid'?: string; // ID for tests;
    isSelected?: boolean;
    onClick?: () => void;
    // Now we support only danger and default intent
    intent?: INTENT;
}

type IntentClassNames = 'ddItemIntentDefault' | 'ddItemIntentDanger';

const filterProps = createHtmlPropsFilter<IProps, React.HTMLAttributes<HTMLDivElement>>([
    'isDisabled',
    'isMinimal',
    'isReadonly',
    'rightIcon',
    'children',
    'leftIcon',
    'forwardRef',
    'isSelected',
    'isHeader',
    'intent'
]);

export class Item extends React.Component<IProps, any> {
    override componentDidMount () {
        document.addEventListener('keydown', this.onKeyDown);
    }


    override componentWillUnmount () {
        document.removeEventListener('keydown', this.onKeyDown);
    }

    onKeyDown = (e: KeyboardEvent) => {
        if (e.key === 'Enter' && this.props.isSelected === true) {
            safeInvoke(this.props.onClick);
        }
    }

    handleClick = (e: React.SyntheticEvent<HTMLDivElement>) => {
        e.stopPropagation();
        e.preventDefault();

        if (this.props.isDisabled !== true) {
            safeInvoke(this.props.onClick);
        }
    }

    override render () {
        const intent = this.props.intent || INTENT.DEFAULT;
        const intentThemeKey = getIntentThemeKey<IntentClassNames>('ddItem', intent);

        const className = joinClassNames(
            styles.ddItem,
            [styles.ddItemMinimal, Boolean(this.props.isMinimal)],
            [styles.ddItemReadonly, Boolean(this.props.isReadonly)],
            [styles.ddItemDisabled, Boolean(this.props.isDisabled)],
            [styles.ddItemWithLeftIcon, Boolean(this.props.leftIcon)],
            [styles.ddItemSelected, Boolean(this.props.isSelected)],
            [styles.ddItemHeader, Boolean(this.props.isHeader)],
            styles[intentThemeKey]
        );

        const ItemProps = {
            ...filterProps(this.props),
            className,
            ref: this.props.forwardRef,
            onClick: this.handleClick
        };

        const isChildrenString = typeof this.props.children === 'string';

        return (
            <div {...ItemProps}>
                {this.props.leftIcon !== undefined && (renderIcon(
                    this.props.leftIcon,
                    {},
                    {
                        className: styles.ddItemLeftIconContainer
                    }
                ))}
                {
                    isChildrenString ? (
                        <div className={styles.ddItemTextChildrenContainer}>
                            <Tooltip overlay={this.props.children} mouseEnterDelay={1000} placement={PLACEMENT.TOP}>
                                <span>{this.props.children}</span>
                            </Tooltip>
                        </div>
                    ) : this.props.children
                }
                {this.props.rightIcon !== undefined && (renderIcon(
                    this.props.rightIcon,
                    {}, {
                        className: styles.ddItemRightIconContainer
                    }
                ))}
            </div>
        );
    }
}