import {Fragment, ReactNode} from 'react';
import classNames from 'classnames';
import {cls} from '../utils/cls';
import {TypeLayoutItem} from '../module-defs/ui-types';

function renderTitleRow(props: {
    titleRow?: {
        items: Array<{
            text: string
        }>
    }
}) {
    if (!props.titleRow) {
        return null;
    }

    return (
        <div className={classNames(
            cls('content-title'),
            'item-row'
        )}
        >
            {props.titleRow.items.map(
                (item, index) => (
                    // eslint-disable-next-line react/no-array-index-key
                    <Fragment key={index}>
                        {
                            index ? <span className={'item-gap'} /> : null
                        }
                        <span className={'item-cell'}>
                            {item.text}
                        </span>
                    </Fragment>
                )
            )}
        </div>
    );
}

export interface TypeLayoutRenderedItem {
    elem: ReactNode
    className?: string
    prevGapClassName?: string
}

function renderContent(props: {
    rows: Array<{
        items: TypeLayoutItem[]
    }>

    renderItem: (item: TypeLayoutItem) => TypeLayoutRenderedItem

    onItemClick?: (item: TypeLayoutItem) => void
    onItemMouseEnter?: (item: TypeLayoutItem) => void
}) {
    return props.rows.map(
        (row, rowIndex) => (
            <div
                /* eslint-disable-next-line react/no-array-index-key */
                key={rowIndex}
                className={
                    classNames(
                        cls('content-row'),
                        'row'
                    )
                }
            >
                {
                    row.items.map(
                        (item, colIndex) => {
                            const {
                                elem,
                                prevGapClassName,
                            } = props.renderItem(item);

                            return (
                                // eslint-disable-next-line react/no-array-index-key
                                <Fragment key={colIndex}>
                                    {
                                        colIndex ? (
                                            <span
                                                className={classNames('item-gap', prevGapClassName)}
                                            />
                                        ) : null
                                    }
                                    <span className={'item-cell'}>
                                        {elem}
                                    </span>
                                </Fragment>
                            );
                        }
                    )
                }
            </div>
        )
    );
}

/**
 *
 * 所有 titleRow.items 与 rows.items 的 item 个数应该都应一致, 用于布局
 *
 * @param props
 * @constructor
 */
export const UiItemLayout = (props: {
    titleRow?: {
        items: Array<{
            text: string
        }>
    }

    rows: Array<{
        items: TypeLayoutItem[]
    }>

    renderItem: (item: TypeLayoutItem) => TypeLayoutRenderedItem

    size?: 's' | 'm'
    onItemClick?: (item: TypeLayoutItem) => void
    onItemMouseEnter?: (item: TypeLayoutItem) => void
}) => {
    const size = props.size === 's' ? 'small' : 'medium';

    return (
        <div className={cls('item-layout-wrapper')} data-size={size}>
            {renderTitleRow(props)}
            {renderContent(props)}
        </div>
    );
};