import {
    BarcodeOutlined,
    GithubOutlined,
    GitlabOutlined,
    LockOutlined,
    MobileOutlined,
    QqOutlined,
    UserOutlined,
    WechatOutlined,
} from '@ant-design/icons'
import { ProFormCaptcha, ProFormCheckbox, ProFormText } from '@ant-design/pro-components'
import { Divider, Space, Tabs, message, Image, Alert, Form, Button } from 'antd'
import { CSSProperties } from 'react'
import { useState } from 'react'
import logo from '@/assets/icons/schisandra.svg'
import qrCode from '@/assets/images/login_qrcode-landaiqing.jpg'
import './index.less'
import { observer } from 'mobx-react'
// import useStore from '@/utils/store/useStore.tsx'
type LoginType = 'account' | 'phone'

const iconStyles: CSSProperties = {
    color: 'rgba(0, 0, 0, 0.2)',
    fontSize: '18px',
    verticalAlign: 'middle',
    cursor: 'pointer',
}

export default observer(() => {
    const [generateMpRegCodeData, setGenerateMpRegCodeData] = useState<API.GenerateMpRegCode>({})
    const [form] = Form.useForm()
    const [base64Code, setBase64Code] = useState<API.GenerateBase64Code>({ data: '' })
    const clickGetBase64CodeMethod = async () => {
        await getBase64CodeMethod()
    }
    const CodeImg = (
        <img
            src={'data:image/jpg;base64,' + base64Code.data}
            onClick={clickGetBase64CodeMethod}
            title='点击刷新'
            style={{ cursor: 'pointer', height: 40, width: 90 }}
        />
    )
    const getBase64CodeMethod = async () => {}

    const items = [
        {
            label: (
                <span>
                    <UserOutlined />
                    账户登录
                </span>
            ),
            key: 'account',
        },
        {
            label: (
                <span>
                    <MobileOutlined />
                    短信登录
                </span>
            ),
            key: 'phone',
        },
    ]
    const [loginType, setLoginType] = useState<LoginType>('account')

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

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

                            {loginType === 'account' && (
                                <>
                                    <ProFormText
                                        name='username'
                                        fieldProps={{
                                            size: 'large',
                                            prefix: <UserOutlined className={'prefixIcon'} />,
                                        }}
                                        placeholder={'请输入账号/邮箱/电话号码'}
                                        rules={[
                                            {
                                                required: true,
                                                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
                                        addonAfter={CodeImg}
                                        name='code'
                                        fieldProps={{
                                            size: 'large',
                                            prefix: <BarcodeOutlined className={'prefixIcon'} />,
                                            autoComplete: 'off',
                                        }}
                                        placeholder='请输入图形验证码'
                                        rules={[
                                            {
                                                required: true,
                                                message: '请输入图形验证码！',
                                            },
                                            {
                                                pattern: /^[a-zA-Z0-9]{5}$/,
                                                message: '图形验证码格式不正确',
                                            },
                                        ]}
                                    />
                                </>
                            )}
                            {loginType === 'phone' && (
                                <>
                                    <ProFormText
                                        fieldProps={{
                                            size: 'large',
                                            prefix: <MobileOutlined className={'prefixIcon'} />,
                                            autoComplete: 'off',
                                        }}
                                        name='mobile'
                                        placeholder={'请输入手机号'}
                                        rules={[
                                            {
                                                required: true,
                                                message: '请输入手机号！',
                                            },
                                            {
                                                pattern: /^1\d{10}$/,
                                                message: '手机号格式错误！',
                                            },
                                        ]}
                                    />
                                    <ProFormText
                                        addonAfter={CodeImg}
                                        name='code'
                                        fieldProps={{
                                            size: 'large',
                                            prefix: <BarcodeOutlined className={'prefixIcon'} />,
                                            autoComplete: 'off',
                                        }}
                                        placeholder='请输入图形验证码'
                                        rules={[
                                            {
                                                required: true,
                                                message: '请输入图形验证码！',
                                            },
                                            {
                                                pattern: /^[a-zA-Z0-9]{5}$/,
                                                message: '图形验证码格式不正确',
                                            },
                                        ]}
                                    />
                                    <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')
                                        }}
                                    />
                                </>
                            )}
                            <div style={{ marginBlockEnd: 14 }}>
                                <ProFormCheckbox noStyle name='autoLogin'>
                                    自动登录
                                </ProFormCheckbox>
                                <a style={{ float: 'right' }}>忘记密码 </a>
                            </div>

                            <Button
                                type='primary'
                                block
                                size='large'
                                onClick={async () => {
                                    let validateFields
                                    if (loginType === 'account') {
                                        validateFields = ['username', 'password', 'code']
                                    } else {
                                        validateFields = ['mobile', 'captcha', 'code']
                                    }

                                    await form
                                        .validateFields(validateFields)
                                        .then(async (values) => {
                                            await onSubmit(values as API.PhoneRegisterRequest)
                                        })
                                        .catch((errorInfo) => {
                                            console.error(errorInfo)
                                        })
                                }}>
                                登录
                            </Button>

                            <div
                                style={{
                                    display: 'flex',
                                    justifyContent: 'center',
                                    alignItems: 'center',
                                    flexDirection: 'column',
                                }}>
                                <Divider plain>
                                    <span
                                        style={{
                                            color: '#CCC',
                                            fontWeight: 'normal',
                                            fontSize: 14,
                                        }}>
                                        其他登录方式
                                    </span>
                                </Divider>
                                <Space align='center' size={24}>
                                    <div
                                        style={{
                                            display: 'flex',
                                            justifyContent: 'center',
                                            alignItems: 'center',
                                            flexDirection: 'column',
                                            height: 40,
                                            width: 40,
                                            border: '1px solid #D4D8DD',
                                            borderRadius: '50%',
                                        }}>
                                        <QqOutlined style={{ ...iconStyles, color: '#1677FF' }} />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            justifyContent: 'center',
                                            alignItems: 'center',
                                            flexDirection: 'column',
                                            height: 40,
                                            width: 40,
                                            border: '1px solid #D4D8DD',
                                            borderRadius: '50%',
                                        }}>
                                        <WechatOutlined
                                            style={{ ...iconStyles, color: '#08a327' }}
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            justifyContent: 'center',
                                            alignItems: 'center',
                                            flexDirection: 'column',
                                            height: 40,
                                            width: 40,
                                            border: '1px solid #D4D8DD',
                                            borderRadius: '50%',
                                        }}>
                                        <GithubOutlined
                                            style={{ ...iconStyles, color: '#333333' }}
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            justifyContent: 'center',
                                            alignItems: 'center',
                                            flexDirection: 'column',
                                            height: 40,
                                            width: 40,
                                            border: '1px solid #D4D8DD',
                                            borderRadius: '50%',
                                        }}>
                                        <GitlabOutlined
                                            style={{ ...iconStyles, color: '#FF6A10' }}
                                        />
                                    </div>
                                </Space>
                            </div>
                        </Form>
                        <a href='/register' className={'go_to_register'}>
                            <span>注册</span>
                        </a>
                    </Space>
                </Space>
            </div>
        </div>
    )
})