import React, { useState } from 'react';
import { Tag, Space, Button, Input, Radio, DatePicker, Form, Typography, Modal, Card, } from 'antd';
import dayjs from 'dayjs';
import OakAvatar from '../../../components/extraFile/avatar';
import ExtraFileCommit from '../../../components/extraFile/commit';
import MobileLogin from '../../../components/mobile/login';
import WechatLoginQrCode from '../../../components/wechatLogin/qrCode';
import WechatUserList from '../../../components/wechatUser/bindingList';
import Style from './web.module.less';
export default function Render(props) {
    const { data, methods } = props;
    const { t, updateMyInfo, editMobile, goAuthenticate, sendCaptcha, unbindingWechat, editPassword, } = methods;
    const { nickname, name, birth, gender, mobile, oakExecuting, genderOptions, oakFullpath, oakDirty, wechatUser, editable, userStateColor, userStateStr, idStateColor, idStateStr, isRoot, isCreation, } = data;
    const [open, setOpen] = useState(false);
    const [open2, setOpen2] = useState(false);
    return (<div className={Style.container}>
            <Card title={t('baseInfo')}>
                <Form labelCol={{ xs: { span: 4 }, md: { span: 6 } }} wrapperCol={{ xs: { span: 16 }, md: { span: 12 } }}>
                    <Form.Item label={t('avatar')} name="extraFile$entity">
                        <>
                            <OakAvatar oakAutoUnmount={true} oakPath={oakFullpath + '.extraFile$entity'} entity="user"/>
                        </>
                    </Form.Item>
                    <Form.Item label={t('user:attr.name')} rules={[
            {
                required: true,
            },
        ]}>
                        <>
                            <Input disabled={!editable} placeholder="" onChange={(e) => methods.update({
            name: e.target.value,
        })} value={name}/>
                        </>
                    </Form.Item>
                    <Form.Item label={t('user:attr.nickname')} rules={[
            {
                required: true,
            },
        ]}>
                        <>
                            <Input disabled={!editable} placeholder="" onChange={(e) => methods.update({
            nickname: e.target.value,
        })} value={nickname}/>
                        </>
                    </Form.Item>
                    <Form.Item label={t('user:attr.gender')}>
                        <Space direction="vertical">
                            <Radio.Group disabled={!editable} value={gender} options={genderOptions} onChange={({ target: { value } }) => {
            methods.update({ gender: value });
        }}/>
                        </Space>
                    </Form.Item>
                    <Form.Item label={t('user:attr.birth')}>
                        <>
                            <DatePicker disabled={!editable} format="YYYY-MM-DD" inputReadOnly={true} allowClear={false} value={birth ? dayjs(birth) : undefined} disabledDate={(current) => {
            if (dayjs(current).valueOf() >
                dayjs().valueOf()) {
                return true;
            }
            return false;
        }} onChange={(value) => {
            if (value) {
                methods.update({
                    birth: dayjs(value).valueOf(),
                });
            }
        }}/>
                        </>
                    </Form.Item>
                    {editable && <Form.Item wrapperCol={{
                xs: { offset: 4 },
                md: { offset: 6 },
            }}>
                        <Space>
                            <ExtraFileCommit oakPath={oakFullpath} entity="user"/>
                        </Space>
                    </Form.Item>}
                </Form>
            </Card>
            <div style={{ marginTop: 10 }}></div>

            {!isCreation && <Card title={t('secuInfo')}>
                <Form labelCol={{ xs: { span: 4 }, md: { span: 6 } }} wrapperCol={{ xs: { span: 16 }, md: { span: 12 } }}>
                    <Form.Item label={t('user:attr.userState')}>
                        <Space>
                            <Tag color={userStateColor}>{userStateStr}</Tag>
                        </Space>
                    </Form.Item>
                    <Form.Item label={t('user:attr.idState')}>
                        <Space>
                            <Tag color={idStateColor}>{idStateStr}</Tag>
                            {editable && <Button size="small" onClick={() => goAuthenticate()}>
                                {t('verify')}
                            </Button>}
                        </Space>
                    </Form.Item>
                    <Form.Item label={t('mobile')}>
                        <Space>
                            <Typography>{mobile || t('unset')}</Typography>
                            {editable && <Button size="small" onClick={() => {
                    if (mobile) {
                        editMobile();
                        return;
                    }
                    setOpen(true);
                }}>
                                {mobile ? t('manage') : t('bind')}
                            </Button>}
                        </Space>
                    </Form.Item>
                    <Form.Item label={t('user:attr.password')}>
                        <Space>
                            <Typography>{'********'}</Typography>
                           {editable && <Button disabled={!editable} size="small" onClick={() => {
                    editPassword();
                    return;
                }}>
                                {t('manage')}
                            </Button>}
                        </Space>
                    </Form.Item>
                    {process.env.NODE_ENV === 'development' && (<Form.Item label={t('wechatAccount')}>
                            <>
                                {wechatUser ? (<Space>
                                        <Typography>
                                            {wechatUser.nickname}
                                        </Typography>
                                        <WechatUserList oakPath={oakFullpath
                        ? `${oakFullpath}.wechatUser$user`
                        : undefined}/>
                                    </Space>) : (<Button size="small" disabled={!editable} onClick={() => {
                        setOpen2(true);
                    }}>
                                        {t('bind')}
                                    </Button>)}
                            </>
                        </Form.Item>)}
                </Form>
            </Card>}

            <Modal title={t('bindMobile')} open={open} destroyOnClose={true} footer={null} onCancel={() => {
            setOpen(false);
        }}>
                <MobileLogin callback={() => {
            setOpen(false);
        }} oakPath="$user/info-mobile/login" oakAutoUnmount={true}/>
            </Modal>

            <Modal title={t('bindWechat')} open={open2} destroyOnClose={true} footer={null} maskClosable={false} onCancel={() => {
            setOpen2(false);
        }}>
                <WechatLoginQrCode oakPath="$user/info-wechatLogin/qrCode" oakAutoUnmount={true}/>
            </Modal>
        </div>);
}