import * as React from 'react';
import { FunctionComponent } from 'react';
import { Context } from '../context/context';
import { User } from '../models/User';
import { getColorByBrightness } from '../util/ColorUtil';
import Space from './Space';

export type LayoutMode = "right" | "left";

const UserStatus: FunctionComponent<{
    context: Context,
    user: User,
    layoutMode: LayoutMode,
    visible?: boolean,
    style?: React.CSSProperties
}> = ({ context, user, layoutMode, visible, style }) => {
    if (!visible) return <></>;
    const textColorOnBoard = getColorByBrightness(
        context.themeManager.theme.boardColor,
        context.themeManager.theme.textColor,
        context.themeManager.theme.textLightColor
    );
    return (
        <div style={style} className={layoutMode === "right" ? "flex-rtl" : "flex-ltr"}>
            <span style={{color: textColorOnBoard}} className="material-symbols-outlined icon" >
                face_6
            </span>
            <Space width='5px' />
            <span style={{color: textColorOnBoard}} className='text'>{user.isAnonymous ? context.texts.Anonymous : user.name}</span>
            <Space width='5px' />
            <div className={"circle " + (user.isOnline ? "online" : "offline")}></div>
            <style jsx>{`
                .online {
                    background-color: ${context.themeManager.theme.boardColor};
                }
                .offline {
                    background-color: transparent;
                }
                .circle {
                    width: 15px;
                    height: 15px;
                    min-width: 15px;
                    min-height: 15px;
                    border-radius: 15px;
                    border: 2px solid ${context.themeManager.theme.boardColor};
                }
                .flex-rtl {
                    display: flex;
                    flex-direction: row-reverse;
                    align-items: center;
                }
                .flex-ltr {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                }
                .text {
                    font-weight: bold;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                .icon {
                    color : "grey";
                    width: 32px;
                    height: 32px;
                    font-size: 32px;
                }
            `}</style>
        </div>
    );
}

export default UserStatus;