import React from "react";
import { BorderLine } from "./borderLine";
import { MobileAddPartHeader } from "./mobileAddPartHeader";
import { UsersList } from "./usersList";
import { SettingButtons } from "./settingButtons";
import './mobileAddPart.css';
import { ShareContainer } from "./shareContainer";

type TProps = {
    onClickClose: () => void
    title: string
    type: 'users' | 'other' | 'selectLang' | 'share'
    users?: '???' //
    onClickShare?: () => void
    onClickExit?: () => void
    onClickChangeLang?: () => void
    onClickSelectLang?: () => void
    onClickBackButton?: () => void
    isContainBack?: boolean
}

export const MobileAddPart:React.FC<TProps> = React.memo((props) => {
    return <div className="mobile-users-part">
        <MobileAddPartHeader
            onClick={props.onClickClose}
            title={props.title}
            isBackButton={props?.isContainBack}
            onClickBackButton={props?.onClickBackButton}
        />
        <BorderLine />        
        {
            props.type === 'users'
            ? <UsersList />
            : props.type === 'other'
            ? <SettingButtons 
                type="other"
                onClickChangeLang={props.onClickChangeLang}
                onClickShare={props.onClickShare}
                onClickExit={props.onClickExit}
            />
            : props.type === 'selectLang'
            ? <SettingButtons
                type="selectLang"
                onClickSelectLang={props.onClickSelectLang}
            />
            : props.type === 'share'
            ? <ShareContainer />
            : null
        }        
    </div>
})