import { LockOutlined, MobileOutlined, WechatOutlined } from '@ant-design/icons'
import { ProFormCaptcha, ProFormText } from '@ant-design/pro-components'
import { Space, Tabs, message, Image, Alert, Form, Button } from 'antd'
import { useState } from 'react'
import logo from '@/assets/icons/schisandra.svg'
// import background from '@/assets/images/background.png'
import qrCode from '@/assets/images/login_qrcode-landaiqing.jpg'
import styles from './index.module.less'
import { observer } from 'mobx-react'
import FooterComponent from '@/components/Footer'
// import useStore from '@/utils/store/useStore.tsx'
type LoginType = 'phone'

export default observer(() => {
    const [form] = Form.useForm()
    const items = [
        {
            key: 'phone',
            label: (
                <span>
                    <MobileOutlined />
                    手机号注册
                </span>
            ),
        },
    ]
    const [loginType, setLoginType] = useState<LoginType>('phone')

    const onSubmit = async (formData: object) => {
        console.log(formData)
    }
    return (
        <div className={styles.container}>
            <div className={styles.content}>
                <Space>
                    <Space className={styles.login_content}>
                        <Space align='center' className={styles.mp_code}>
                            <Space direction='vertical' align='center'>
                                <span className={styles.mp_code_title}>微信扫码登录</span>
                                <Image
                                    preview={false}
                                    height={210}
                                    width={200}
                                    className={styles.mp_code_img}
                                    // src={generateMpRegCodeData.data?.qrCodeUrl}
                                    src={qrCode}
                                />
                                <Alert
                                    // message={(<span>微信扫码<span>关注公众号</span></span>)}
                                    description={
                                        <div>
                                            <span>
                                                微信扫码
                                                <span className={styles.mp_tips}>关注公众号</span>
                                            </span>
                                            <br />
                                            登录更快更安全
                                        </div>
                                    }
                                    // type="success"
                                    showIcon={true}
                                    className={styles.alert}
                                    icon={<WechatOutlined />}
                                />
                            </Space>
                        </Space>
                        <Form
                            form={form}
                            className={styles.login_form}
                            initialValues={{
                                autoLogin: true,
                            }}>
                            <Space direction='vertical' align='center'>
                                <Space className={styles.logo}>
                                    <img
                                        alt='logo'
                                        src={logo}
                                        style={{ width: '44px', height: '44px' }}
                                    />
                                    <span>五味子云存储</span>
                                </Space>
                                <div className={styles.subTitle}>随时随地分享你的美好瞬间</div>
                            </Space>

                            <Tabs
                                centered={true}
                                items={items}
                                activeKey={loginType}
                                onChange={(activeKey) =>
                                    setLoginType(activeKey as LoginType)
                                }></Tabs>

                            <>
                                <ProFormText
                                    fieldProps={{
                                        size: 'large',
                                        prefix: <MobileOutlined className={'prefixIcon'} />,
                                        autoComplete: 'off',
                                    }}
                                    name='phone'
                                    placeholder='请输入手机号！'
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入手机号！',
                                        },
                                        {
                                            pattern: /^1\d{10}$/,
                                            message: '手机号格式错误！',
                                        },
                                    ]}
                                />

                                <ProFormText.Password
                                    name='password'
                                    fieldProps={{
                                        size: 'large',
                                        prefix: <LockOutlined className={'prefixIcon'} />,
                                    }}
                                    placeholder='请输入密码'
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入密码！',
                                        },
                                        {
                                            pattern:
                                                /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/,
                                            message:
                                                '密码长度需在6~18位字符，且必须包含字母和数字！',
                                        },
                                    ]}
                                />

                                <ProFormText.Password
                                    name='confirmPassword'
                                    dependencies={['password']}
                                    fieldProps={{
                                        size: 'large',
                                        prefix: <LockOutlined className={'prefixIcon'} />,
                                    }}
                                    placeholder='请再次确认密码'
                                    rules={[
                                        {
                                            required: true,
                                            message: '请再次确认密码！',
                                        },
                                        ({ getFieldValue }) => ({
                                            validator(_, value) {
                                                if (!value || getFieldValue('password') === value) {
                                                    return Promise.resolve()
                                                }
                                                return Promise.reject(
                                                    new Error('两次输入的密码不一致!'),
                                                )
                                            },
                                        }),
                                    ]}
                                />
                                <ProFormCaptcha
                                    fieldProps={{
                                        size: 'large',
                                        prefix: <LockOutlined className={'prefixIcon'} />,
                                    }}
                                    captchaProps={{
                                        size: 'large',
                                    }}
                                    placeholder={'请输入验证码'}
                                    captchaTextRender={(timing, count) => {
                                        if (timing) {
                                            return `${count} ${'获取验证码'}`
                                        }
                                        return '获取验证码'
                                    }}
                                    name='captcha'
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入验证码！',
                                        },
                                    ]}
                                    onGetCaptcha={async () => {
                                        message.success('获取验证码成功！验证码为：1234')
                                    }}
                                />
                            </>
                            <Button
                                type='primary'
                                block
                                size='large'
                                onClick={async () => {
                                    const validateFields = [
                                        'phone',
                                        'username',
                                        'password',
                                        'captcha',
                                        'code',
                                        'confirmPassword',
                                    ]
                                    await form
                                        .validateFields(validateFields)
                                        .then(async (values) => {
                                            await onSubmit(values as API.PhoneRegisterRequest)
                                        })
                                        .catch((errorInfo) => {
                                            console.error(errorInfo)
                                        })
                                }}>
                                注册
                            </Button>
                        </Form>
                        <a href='/login' className={styles.go_to_register}>
                            <span>登录</span>
                        </a>
                    </Space>
                </Space>
            </div>
            <FooterComponent />
        </div>
    )
})