import React from "react"
import { DataColumn } from "../types/column.type"
import { DataColumnExtra } from "../types/table.type"
import { BodyCellContent } from "./style"

export interface ValueProps {
    style?: React.CSSProperties,
    value: any
    column: DataColumn,
    disabled?: boolean
    modified?: boolean
}

export const Value: React.FC<ValueProps> = ({ style, value, column, disabled, modified }) => {
    return (
        typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean'
            ? (
                <BodyCellContent
                    component="div"
                    color={
                        modified
                            ? 'info.main'
                            : disabled
                                ? 'action.disabled'
                                : 'text'
                    }
                    style={style}>

                    {`${value || value === 0 || value === false ? value : ''}`}
                </BodyCellContent>
            )
            : value
                ? ((column as DataColumnExtra).type === 'set' || (column as DataColumnExtra).type === 'text') && value.label
                    ? (
                        <BodyCellContent
                            component="div"
                            color={
                                modified
                                    ? 'info.main'
                                    : disabled
                                        ? 'action.disabled'
                                        : 'text'
                            }
                            style={style}>

                            {`${value.label}`}
                        </BodyCellContent>
                    )
                    : value
                : ''
    )
}