import * as React from 'react';
import PlainButton from '../../../components/plain-button/PlainButton';
import { TYPE_FOLDER, TYPE_WEBLINK } from '../../../constants';
import type { BoxItem } from '../../../common/types/core';

import './ItemName.scss';

type Props = {
    canPreview: boolean,
    isTouch: boolean,
    item: BoxItem,
    onClick: any,
    onFocus?: any
};

const ItemName = ({
    item,
    onClick,
    onFocus,
    canPreview,
    isTouch,
}: Props) => {
    const {
        name,
        type,
    }: BoxItem = item;
    const onItemFocus = onFocus ? () => onFocus(item) : null;
    const onItemClick: any = (): void => onClick(item);

    return type === TYPE_FOLDER || (!isTouch && (type === TYPE_WEBLINK || canPreview)) ? (
        <PlainButton
            className="be-item-label"
            data-testid="be-item-name"
            onClick={onItemClick}
            onFocus={onItemFocus}
            type="button"
        >
            {name}
        </PlainButton>
    ) : (
        <span className="be-item-label">{name}</span>
    );
};

export default ItemName;