import React from 'react';
import { Tag, Avatar, Descriptions, Button } from 'antd';
import ActionPanel from 'oak-frontend-base/es/components/func/actionPanel';
export default function render(props) {
    const { nickname, avatar, name, userState, idState, gender, idStateStr, idStateColor, userStateColor, userStateStr, mobileText, executableActions, actionDescriptions, birth, mobileUpdatable, } = props.data;
    const { t, onActionClick, onMobileItemClicked } = props.methods;
    return (<>
            <Descriptions extra={<ActionPanel actions={executableActions} actionDescriptions={actionDescriptions} onActionClick={(action) => onActionClick(action)}/>}>
                <Descriptions.Item label={t('avatar')}>
                    {avatar ? <Avatar src={avatar}/> : t('unset')}
                </Descriptions.Item>

                <Descriptions.Item label={t('user:attr.nickname')}>
                    {nickname || t('unset')}
                </Descriptions.Item>

                <Descriptions.Item label={t('user:attr.name')}>
                    {name || t('unset')}
                </Descriptions.Item>

                <Descriptions.Item label={t('user:attr.gender')}>
                    {gender ? t(`user:v.gender.${gender}`) : t('unset')}
                </Descriptions.Item>

                <Descriptions.Item label={t('user:attr.birth')}>
                    {birth || t('unset')}
                </Descriptions.Item>

                <Descriptions.Item label={t('mobile')}>
                    {mobileText || t('unset')}
                    {mobileUpdatable && <Button type="link" size="small" onClick={() => onMobileItemClicked()}>
                        {t('common::action.update')}
                    </Button>}
                </Descriptions.Item>

                <Descriptions.Item label={t('user:attr.userState')}>
                    <Tag color={userStateColor}>
                        {userStateStr}
                    </Tag>
                </Descriptions.Item>
                <Descriptions.Item label={t('user:attr.idState')}>
                    <Tag color={idStateColor}>
                        {idStateStr}
                    </Tag>
                </Descriptions.Item>
            </Descriptions>
        </>);
}