import React from 'react';
import ListColumn, {ListColumnProps} from "./ListColumn";
import './TextIndicationColumn.scss'
interface TextColumnProps extends ListColumnProps {
    customClass?: string
    textWrap?: boolean
    size?: string
    label?: any //only for mobile screens
    orderable?: string
    indicator?:boolean
    onOff?: boolean
    onClick?: () => void
    textColor?: string
}


const justifyMap: Record<'center' | 'left' | 'right', string> = {
    'left': 'flex-start',
    'center': 'center',
    'right': 'flex-end'
}

const TextColumn = ({
    children,
    customClass,
    flex,
    indicator,
    onOff,
    size = '12px',
    title,
    textWrap = false,
    textColor ='',
    label,
    align = 'left',
    onClick,
    }: TextColumnProps) => {

    const justify = justifyMap[align]

    return (
        <ListColumn
            overflow='hidden'
            title={title}
            flex={flex}
            align={align}
        >
            <div onClick={()=> {
                        onClick && onClick()
                    }}
                 style={{
                     ...(textColor ? { color: textColor } : {}),
                     justifyContent: justify,
                     whiteSpace: textWrap ? 'initial' : 'nowrap',
                     fontSize: size,
                 }}
                className={`text-column column-border ${indicator ? 'text-indication-column' : ''} ${customClass ? customClass : ''}`}>
                {label && label !== '' && <span className={'label'}>{label}:</span>}
                <div className={'ellipsis d-flex justify-content-start align-items-center'}>
                    {indicator &&  <span className={'indicator ' + (onOff ? 'on' : 'off')}></span> }
                    <span>{children ? children : '--'}</span>
                </div>
            </div>
        </ListColumn>
    );
}

export default TextColumn;