import React from 'react';
import { List, DatePicker, Tag, Button, Input, Radio, Space, } from 'antd-mobile';
import ExtraFileCommit from '../../extraFile/commit';
import dayjs from 'dayjs';
import OakAvatar from '../../../components/extraFile/avatar';
import Style from './mobile.module.less';
export default function render(props) {
    const { data, methods } = props;
    const { t, clean, editMobile, goAuthenticate, refreshWechatPublicUserInfo, editPassword, editNickname, editName, editGender, cancelEdit, update, editBirth, execute, } = methods;
    const { oakFullpath, executable, nickname, name, birth, gender, mobile, isCreation, id, canSyncPublic, refreshing, editAttr, genderOptions, oakDirty, nnDirty, birthDirty, nameDirty, genderDirty, userStateColor, userStateStr, idStateColor, idStateStr, idState, editable, } = data;
    return (<div className={Style.container}>
            <div className={Style['avatar_container']}>
                <OakAvatar oakAutoUnmount={true} oakPath={oakFullpath + '.extraFile$entity'} entity="user" entityId={id} autoUpload={true}/>
            </div>
            <List className={Style.list}>
                <List.Item extra={editAttr !== 'nickname' ? (<div className={nnDirty ? Style.dirty : undefined}>
                            {nickname ? nickname : t('unset')}
                        </div>) : (<Input disabled={!editable} placeholder={t('placeholder.nickname')} autoFocus value={nickname} onChange={(value) => update({
                nickname: value,
            })} onBlur={() => cancelEdit()} onEnterPress={() => cancelEdit()}/>)} onClick={editAttr === 'nickname' ? undefined : () => editNickname()}>
                    {t('user:attr.nickname')}
                </List.Item>
                <List.Item extra={editAttr !== 'name' ? (<div className={nameDirty ? Style.dirty : undefined}>
                            {name ? name : t('unset')}
                        </div>) : (<Input disabled={!editable} placeholder={t('placeholder.name')} autoFocus value={name} onChange={(value) => update({
                name: value,
            })} onBlur={() => cancelEdit()} onEnterPress={() => cancelEdit()}/>)} onClick={editAttr === 'name' ? undefined : () => editName()} clickable={editable && idState !== 'verified'}>
                    {t('user:attr.name')}
                </List.Item>
                <List.Item extra={editAttr !== 'gender' ? (<div className={genderDirty ? Style.dirty : undefined}>
                            {gender ? t(`user:v.gender.${gender}`) : t('unset')}
                        </div>) : (<Radio.Group disabled={!editable} value={gender} onChange={(value) => {
                update({
                    gender: value,
                });
                cancelEdit();
            }}>
                            <Space direction="horizontal">
                                {genderOptions.map((ele) => (<Radio value={ele.value}>
                                            {ele.label}
                                        </Radio>))}
                            </Space>
                        </Radio.Group>)} onClick={editAttr === 'gender' ? undefined : () => editGender()} clickable={editable && idState !== 'verified'}>
                    {t('user:attr.gender')}
                </List.Item>
                <List.Item extra={<div className={birthDirty ? Style.dirty : undefined}>
                            {birth ? dayjs(birth).format('YYYY-MM-DD') : t('unset')}
                        </div>} onClick={editAttr === 'birth' ? undefined : () => editBirth()} clickable={editable && idState !== 'verified'}>
                    {t('user:attr.birth')}
                </List.Item>
                {!isCreation && <List.Item extra={mobile ? mobile : t('unset')} onClick={() => {
                editMobile();
            }}>
                    {t('mobile')}
                </List.Item>}
                {!isCreation && <List.Item extra={'********'} onClick={() => {
                editPassword();
            }}>
                    {t('password')}
                </List.Item>}
                <List.Item extra={<Tag fill="outline" color={userStateColor}>
                            {userStateStr}
                        </Tag>}>
                    {t('user:attr.userState')}
                </List.Item>
                <List.Item extra={<Tag fill="outline" color={idStateColor}>
                            {idStateStr}
                        </Tag>} onClick={() => goAuthenticate()}>
                    {t('user:attr.idState')}
                </List.Item>
            </List>
            <DatePicker visible={editAttr === 'birth'} onClose={() => cancelEdit()} precision='day' min={new Date('1900-01-01')} max={new Date()} value={new Date(birth)} onConfirm={(value) => {
            update({
                birth: dayjs(value).startOf('day').valueOf(),
            });
        }}/>
            <div className={Style.btnContainer}>
                {!oakDirty && canSyncPublic && editable && <Button className={Style.syncWechat} block onClick={() => refreshWechatPublicUserInfo()}>
                    {t('syncWeChat')}
                </Button>}
                {executable === true && <ExtraFileCommit buttonProps={{
                color: 'primary',
                block: true,
            }} oakPath={oakFullpath} entity="user"/>}
            </div>
        </div>);
}