import React, { useEffect, lazy } from 'react';
import { useForm, Controller } from 'react-hook-form';
import { Button, TextField } from '@material-ui/core';
import PermIdentity from '@material-ui/icons/PermIdentity';
import LockOpen from '@material-ui/icons/LockOpen';
import './index.less';
import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';
import { useHistory } from 'react-router';
import loginService from '../../models/_/login';
import { useDispatch, useSelector } from 'react-redux';
import config from '../../config';


const ReactLazyPreload = importStatement => {
  const Component = React.lazy(importStatement);
  Component.preload = importStatement;
  return Component;
};

const Home = ReactLazyPreload(() =>
  import("../Home")
);

function Alert(props) {
  return <MuiAlert elevation={6} variant="filled" {...props} />;
}

function Login() {
  const [open, setOpen] = React.useState(false);

  const { handleSubmit, control, formState: { errors } } = useForm({
    mode: 'onSubmit'
  });

  const history = useHistory();

  const logoDisplaying = useSelector(s => s.runtime.logoDisplaying);
  const dispatch = useDispatch();

  useEffect(() => {
    Home.preload();
  }, []);
  useEffect(() => {
    if (logoDisplaying) {
      setTimeout(() => {
        dispatch.runtime.setLogoDisplaying(false);
      }, 10000);
    }
  }, [logoDisplaying]);

  const logoEnd = () => {
    dispatch.runtime.setLogoDisplaying(false);
  }

  const onSubmit = async (data) => {
    const user = await loginService.auth(data);

    if (user) {
      history.push('/v/home');
    } else {
      // 提示错误信息
      setOpen(true);
    }
  }

  const handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }
    setOpen(false);
  };

  return (
    logoDisplaying ? (
      <div className="logo-container">
        <video
          style={{ objectFit: 'cover' }}
          src="/assets/logo.mp4"
          objectfit="true"
          autoPlay
          muted
          width="100%"
          height="100%"
          onEnded={logoEnd}
        >
          您的浏览器不支持 video 标签。
        </video>
      </div>
    ) : (
      <div className="loginDiv">
        <div className="loginTxt">
          <p>{config.title}</p>
        </div>
        <Snackbar open={open} autoHideDuration={1500} onClose={handleClose} anchorOrigin={{ vertical: 'top', horizontal: 'center' }}>
          <Alert onClose={handleClose} severity="error">
            用户名或密码错误！
          </Alert>
        </Snackbar>
        <form onSubmit={handleSubmit(onSubmit)} className="myForm1">
          <div className="formitem">
            <PermIdentity />
            <Controller
              name="user"
              control={control}
              render={({ field }) => (
                <TextField
                  {...field}
                  error={!!errors.user}
                  variant="outlined"
                  label="登录名"
                  fullWidth
                  helperText={errors.user?.message || '　'}
                />
              )}
              defaultValue=""
              rules={{ required: '必填' }}
            />
          </div>

          <div className="formitem">
            <LockOpen />
            <Controller
              name="pw"
              control={control}
              render={({ field }) => (
                <TextField
                  {...field}
                  error={!!errors.pw}
                  type="password"
                  variant="outlined"
                  label="密码"
                  fullWidth
                  helperText={errors.pw?.message || '　'}
                />
              )}
              defaultValue=""
              rules={{
                required: '必填'
              }}
            />
          </div>
          <Button type="submit" color="primary" fullWidth size="large" variant="outlined" className="myBtn">登陆</Button>
        </form>
      </div>
    )
  )
}

export default Login