import React, {ReactNode} from 'react';
import './list-row.scss'
import {FilterStatusType} from "../../../models/ReactComponents";


export type ListRowProps = {
    children?: ReactNode
    status?: FilterStatusType | any
    isActive?: boolean  //WHEN FALSE ADDS INACTIVE COLOR THAT OVERRIDES ALL THE COLUMNS AND SETS THEM GRAY
    hasAttention?: boolean //ADDS YELLOW BORDERS
    attentionColor?: string //ADDS RED BORDERS
    hasBackground?: boolean //ADDS bg color used when has attention AND hastriangle are true
    hasBackgroundColor?: string // always provide if the above is true
    hasTriangle?: boolean
    triangleColor?:string
    _key?: string | number // key passed to the inner column wrapper
    customClass?:string
    has_submitted?:boolean |null

}
const ListRow = ({children, status, customClass='', has_submitted = null, isActive = true,triangleColor, hasAttention = false, hasBackground=false, hasBackgroundColor='', attentionColor, hasTriangle = false}: ListRowProps) => {

    const isDark = document.documentElement.getAttribute('data-theme');

    return (

        <div
            style={
                {
                    ...(attentionColor && { '--attention-color': attentionColor }),
                    ...(triangleColor && { '--triangle-color': triangleColor }),
                    ...(hasBackground && hasBackgroundColor && { background: isDark === 'dark' ? '#40474F' : hasBackgroundColor }),
                } as React.CSSProperties
            } className={`list-row ${customClass} ${isActive ? status :  "cancelled"} ${has_submitted ? 'has_submitted' : has_submitted===false? "isnotokay":''}  ${hasBackground && hasBackgroundColor && `hasBackground`} ${hasAttention && "hasAttention"} ${hasTriangle && "hasTriangle"}`}>
            {children}
        </div>

    );
}

export default ListRow;