import React from "react";
import { ToolbarButton } from "../toolbar/toolbarButton";
import { TypeToolbarButtons } from "../toolbar/typeButtons";
import { BorderLine } from "./borderLine";
import { CaptionToolbarButtons } from "../toolbar/typeCaptionButtons";

type TProps = {
    typeUser: TypeToolbarButtons
    onClickMicro?: () => void
    onClickControl?: () => void
    onClickItem?: () => void
}

export const AddPartUserItem:React.FC<TProps> = React.memo((props) => {
    return <div className="user-item" onClick={() => props?.onClickItem ? props?.onClickItem() : null}>
        <ToolbarButton
            type={props.typeUser}
            caption=""
            isCaption={false}
            onClick={() => null}
        />
        <div className="user-item-user-info-container">
            <div className="user-item-user-info">
                <span className="user-item-user-info-name">{CaptionToolbarButtons[props.typeUser]}</span>
                {
                    props.typeUser.includes('user') ?
                    <div className="user-item-user-info-buttons">
                        <ToolbarButton
                            type="micro"
                            active={true}
                            caption=''
                            isCaption={false}
                            onClick={() => props?.onClickMicro ? props?.onClickMicro() : null}
                        />
                        <ToolbarButton
                            type="control"
                            active={false}
                            caption=''
                            isCaption={false}
                            onClick={() => props?.onClickControl ? props?.onClickControl() : null }
                        />
                    </div>
                    : null
                }
            </div>
            <BorderLine />
        </div>
    </div>
})