// ts-nocheck
import React, { FC, memo } from 'react';
import { Tooltip }         from '../../..';
import { cn }              from '../../util/bem';
import { Span }            from '../span/span.component';
import { Wrapper }         from '../wrapper/wrapper.component';
import './input-table-item.component.scss';

export type InputTableItemPropsType = {
    className?: string;
    label: string;
    style?: React.CSSProperties;
    before?: React.ReactNode;
    after?: React.ReactNode;
    onHoverAfter?: boolean;
    onMouseEnter?: () => void;
    onMouseLeave?: () => void;
    tooltipTitle?: string
    tooltipContent?: string
    tooltipMenuWidth?: string
    viewType?: 'primary' | 'secondary';
    children?: React.ReactNode;
}

const className = cn('input-table-item');

export const InputTableItem: FC<InputTableItemPropsType> = memo(((props) => (
    <div
        className={ className({ onHoverAfter: props.onHoverAfter }, null, props.className) }
        style={ props.style }
        onMouseEnter={ props?.onMouseEnter }
        onMouseLeave={ props?.onMouseLeave }
    >
        <Wrapper style={ { height: '100%' } } valign="center" className={ className('label', { viewType: props.viewType }) }>
            <Tooltip
                menuWidth={ props.tooltipMenuWidth }
                title={ props.tooltipTitle }
                message={ props.tooltipContent }
                position="top-center"
            >
                <Span>
                    { props.label }
                </Span>
            </Tooltip>

        </Wrapper>
        <div className={ className('content') }>
            { props.before && (
                <div className={ `${ className('before') }` }>
                    { props.before }
                </div>
            ) }

            {
                React.Children?.map(props.children, (child) => (
                    React.isValidElement(child)
                        ? React.cloneElement(child, { ...child.props, margin: 'off' })
                        : null))
            }

            { props.after && (
                <div className={ className('after') }>
                    { props.after }
                </div>
            ) }
        </div>
    </div>
)));

InputTableItem.defaultProps = { viewType: 'primary' };