import Footer from '@/components/Footer';
import {
getAccessInfo,
getCaptcha,
getInitUserInfo,
userLogin,
} from '@/services/common/login';
import { SelectLang } from '@umijs/max';
// import { getAllParentDictMessage } from '@/services/common/userCenter';
import { LOGIN_CHECK } from '@/services/common/constant';
import { getUserMenus } from '@/services/common/menus';
import { PASSWORD_REG,TOKEN } from '@/utils/constant';
import { menuDataFormat } from '@/utils/format';
import { encryptDES } from '@/utils/tools';
import { LockOutlined,UserOutlined } from '@ant-design/icons';
import {
LoginFormPage,
ProFormCaptcha,
ProFormText,
} from '@ant-design/pro-components';
import { Tabs } from 'antd';
import {
FormattedMessage,
history,
useIntl,
useModel,
useMutation,
} from '@umijs/max';
import React,{ useEffect,useState } from 'react';
import loginBg from '../../assets/logo-bg.png';
import logo from '../../assets/newlogo.png';
import './index.less';

const Login: React.FC = () => {
  // Hooks
  const { initialState, setInitialState } = useModel('@@initialState');
  const [captchaData, setCaptchaData] = useState<API.CaptchaResult>({});
  const [captchaLoading, setCaptchaLoading] = useState(false);
  const [verifyVisible, setVerifyVisible] = useState(false);
  const intl = useIntl();

  // State variables

  // Functions
  const getCaptchaData = () => {
    setCaptchaLoading(true);
    getCaptcha()
      .then((res: any) => {
        setCaptchaData(res.data);
      })
      .catch((error) => {
        console.log(error);
      })
      .finally(() => {
        setCaptchaLoading(false);
      });
  };

  const fetchMenuData = async () => {
    const menuDataRes = await getUserMenus();
    const menuData = menuDataFormat(menuDataRes.data || []);

    localStorage.setItem('menuData', JSON.stringify(menuData));
    return menuData;
  };

  const fetchUserInfo = async () => {
    const userInfoRes = await getInitUserInfo();
    const currentUser = userInfoRes.data;
    localStorage.setItem('currentUser', JSON.stringify(currentUser));

    return currentUser;
  };

  const fetchAccessInfo = async () => {
    const userInfoRes = await getAccessInfo();
    const data: any = {};
    if (userInfoRes.data) {
      for (const item of userInfoRes.data) {
        data[item] = true;
      }
    }
    return data;
  };

  const { mutate, isLoading } = useMutation(userLogin, {
    onSuccess: async (resp: any) => {

      localStorage.setItem(TOKEN, resp.data.token);

      const currentUser: any = await fetchUserInfo();
      const menuData: any = await fetchMenuData();
      const accessInfo: any = await fetchAccessInfo();

      setInitialState({
        ...initialState,
        currentUser,
        menuData,
        accessInfo,
      });
      
      setTimeout(()=>{
        history.push('/');
      },500);
     
    },
    onError: (res: any) => {
      if (res.code?.toString() === LOGIN_CHECK) {
        setVerifyVisible(true);
        getCaptchaData();
      }
    },
  });

  const onLogin = (values: API.userLoginReq) => {
    const data: any = {
      ...values,
      password: encryptDES(values.password),
    };
    if (verifyVisible) {
      data.verifyCodeKey = captchaData.verifyCodeKey;
    }
    mutate({ data });
  };
  useEffect(() => {
    setInitialState({
      settings: initialState?.settings,
    });
  }, []);

  // JSX elements
  return (
    <div
      style={{
        backgroundColor: 'white',
        height: '100vh',
        minHeight: '100vh',
      }}
    >
      <LoginFormPage
        loading={isLoading}
        initialValues={{ autoLogin: true }}
        onFinish={async (values: API.userLoginReq) => onLogin(values)}
        backgroundImageUrl={loginBg}
        logo={logo}
        title={intl.formatMessage({ id: 'component.globalHeader.title' })}
        subTitle={intl.formatMessage({ id: 'component.globalHeader.welcome' })}
        actions={<Footer />}
      >
        <div className="setLanguage">
          <SelectLang reload={false} />
        </div>
        <Tabs
          centered
        >
          <Tabs.TabPane key={'account'} tab={intl.formatMessage({ id: 'component.globalHeader.account' })} />
          <Tabs.TabPane key={'phone'} tab={intl.formatMessage({ id: 'component.globalHeader.phone' })} disabled />
        </Tabs>
        <ProFormText
          name="username"
          fieldProps={{ size: 'large', prefix: <UserOutlined /> }}
          placeholder={intl.formatMessage({
            id: 'pages.login.inputUsername',
            defaultMessage: '用户名: admin or user',
          })}
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="pages.login.usernameRequired"
                  defaultMessage="请输入用户名!"
                />
              ),
            },
          ]}
        />
        <ProFormText.Password
          name="password"
          fieldProps={{ size: 'large', prefix: <LockOutlined /> }}
          placeholder={intl.formatMessage({
            id: 'pages.login.inputpassword',
            defaultMessage: '密码: ant.design',
          })}
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="pages.login.passwordRequired"
                  defaultMessage="请输入密码"
                />
              ),
            },
            {
              min: 8,
              max: 20,
              // 正则
              pattern: PASSWORD_REG,
              message: intl.formatMessage({
                id: 'pages.account.passwordOldInvalid',
              }),
            },
          ]}
        />
        {verifyVisible && (
          <ProFormCaptcha
            fieldProps={{ size: 'large' }}
            captchaProps={{
              size: 'large',
              disabled: false,
              loading: captchaLoading,
              style: { padding: 0 },
            }}
            placeholder={intl.formatMessage({
              id: 'pages.login.inputCode',
              defaultMessage: '验证码',
            })}
            captchaTextRender={() => (
              <img src={captchaData.verifyCode} height="100%" />
            )}
            name="verifyCode"
            rules={[
              {
                required: true,
                message: (
                  <FormattedMessage
                    id="pages.login.captchaRequired"
                    defaultMessage="请输入验证码"
                  />
                ),
              },
            ]}
            onGetCaptcha={async () => getCaptchaData()}
          />
        )}
      </LoginFormPage>
    </div>
  );
};

export default Login;