import React, {FC} from "react";
import {getDefaultRuntimeComponentData} from "./tree/components";
import {__} from "./globals";
import {ComponentMeta, getComponentMetaData} from "./tree/ComponentsMeta";
import classNames from "classnames";
import {withDecodedEntities} from "./helpers";

export type TestableListItemProps = {
    componentMeta: ComponentMeta,
    onSelect?: (id: string)  => void,
    name?: 'full' | 'short',
    size?: 'small' | 'large',
    rightContent?: React.ReactNode,
    style?: 'solid' | 'line',
}

export const TestableListItem: FC<TestableListItemProps> = ({componentMeta, onSelect, name = 'full', size = 'large', style = 'line', rightContent}) => {
    const componentData = withDecodedEntities(getComponentMetaData(componentMeta));

    return <button className={classNames({
        'flex items-center text-gray-800 rounded-2 group': true,
        'border-px border-gray-200 w-full hover:bg-purple-tint-10 hover:border-purple-tint-50 hover:bg-opacity-50 ': style === 'line',
        'border-0 bg-purple-tint-10 hover:bg-purple-tint-20 hover:bg-opacity-50': style === 'solid',
        'space-x-3 py-4 px-7': size === 'large',
        'space-x-2 py-2 px-4': size === 'small',
    })} onClick={() => onSelect?.(componentMeta.id)}>
        {componentMeta.icon?.({className: "w-5 h-5 text-gray-350 group-hover:text-purple-tint-90"})}
        <div className="flex flex-row items-center space-x-5">
            <div className="space-x-1">
                {name === 'full' && (<><span className="text-gray-350">{__('Items in')}</span><span className="text-1x font-medium group-hover:text-purple-tint-90">{__('Specific')} {componentData.name}</span></>)}
                {name === 'short' && <span className="text-1x font-medium group-hover:text-purple-tint-90">{componentData.name}</span>}
            </div>
            {rightContent}
        </div>
    </button>
}