'use strict';
import React, { useEffect, useRef } from 'react';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import { Form, Button, Toast } from '@douyinfe/semi-ui';
import { login, LOGIN_SUCCESS } from '../actions/auth';
import { IconLock, IconUser } from '@douyinfe/semi-icons';
import '../style.less'

const Login = props => {
    const { dispatch, user, error, actions, apiRoot, isRequesting } = props
    const form = useRef();

    useEffect(() => {
        if (error) {
            Toast.error(error);
            form.current.setValue('password', '')
        }
    }, [error])

    useEffect(() => {
        if (user && user.authorized) {
            dispatch(push('/edgeGateway/gateway'));
            // localStorage.setItem('fs_iot_auth_selected_sider', JSON.stringify([]))
            // localStorage.setItem('fs_iot_auth_open_sider', JSON.stringify([]))
        }
    }, [user])

    return (
        <div style={{
            height: '100vh',
            backgroundImage: "url('/assets/images/background/loginBackground.png')",
            backgroundSize: 'cover',
            backgroundRepeat: 'no-repeat',
            position: 'relative',
        }}>
            <div style={{
                width: 446,
                height: 348,
                padding: '45px 60px',
                backgroundImage: "url('/assets/images/background/loginbg.png')",
                backgroundSize: '100% 100%',
                backgroundRepeat: 'no-repeat',
                position: 'absolute',
                top: '33.89%',
                right: '16.43%',
            }}>
                <div style={{ width: 113, height: 24, marginTop: 3, marginLeft: 5 }}>
                    <img src="/assets/images/background/user_login.png" alt="" style={{ width: '100%', height: '100%' }} />
                </div>
                <Form
                    onSubmit={values => {
                        dispatch(login(values.username, values.password)).then(res => {
                            const data = res.payload.user
                            //  dispatch(actions.layout.initWebSocket({ ioUrl: apiRoot, token: data.token }))
                        })
                    }}
                    getFormApi={formApi => form.current = formApi}
                >
                    <Form.Input
                        className='inputbgc'
                        field='username'
                        noLabel={true}
                        label='用户名'
                        placeholder='请输入账号'
                        prefix={<IconUser style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
                        style={{ background: 'rgba(24, 89, 193, 0.08)', height: 40, marginTop: 26 }}
                    />
                    <Form.Input
                        field='password'
                        noLabel={true}
                        mode="password"
                        autoComplete=""
                        placeholder='请输入密码'
                        label='密码'
                        prefix={<IconLock style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
                        style={{ background: 'rgba(24, 89, 193, 0.08)', height: 40 }}
                    />
                    <Button htmlType='submit' block theme="solid" style={{ marginTop: 17, height: 40, backgroundColor: '#1859C1' }}>立即登录</Button>
                </Form>
            </div>
        </div>
    );
}

function mapStateToProps(state) {
    const { auth, global } = state;
    return {
        user: auth.user,
        error: auth.error,
        actions: global.actions,
        apiRoot: global.apiRoot,
        isRequesting: auth.isRequesting
    }
}

export default connect(mapStateToProps)(Login);