// @ts-nocheck
import React from 'react';
import { Form, Input, Button } from 'antd';
import { MailOutlined, } from '@ant-design/icons';
import Style from './web.module.less';
export default function Render(props) {
    const { data, methods } = props;
    const { counter, loading, disabled, email, captcha, validEmail, validCaptcha, allowSubmit, digit } = data;
    const { sendCaptcha, loginByEmail, t, inputChange } = methods;
    return (<Form colon={true}>
            <Form.Item name="email">
                <Input allowClear value={email} type="email" size="large" prefix={<MailOutlined />} placeholder={t('placeholder.Email', { digit })} onChange={(e) => {
            inputChange('email', e.target.value);
        }} className={Style['loginbox-input']}/>
            </Form.Item>
            <Form.Item name="captcha">
                <Input allowClear value={captcha} size="large" maxLength={digit} placeholder={t('placeholder.Captcha', { digit })} onChange={(e) => {
            inputChange('captcha', e.target.value);
        }} className={Style['loginbox-input']} suffix={<Button size="small" type="link" disabled={!!disabled || !validEmail || counter > 0} onClick={() => sendCaptcha()}>
                            {counter > 0
                ? counter + t('resendAfter')
                : t('Send')}
                        </Button>}/>
            </Form.Item>

            <Form.Item>
                <Button block size="large" type="primary" disabled={disabled || !allowSubmit || loading} loading={loading} onClick={() => loginByEmail()}>
                    {t('Login')}
                </Button>
            </Form.Item>
        </Form>);
}