import {
  LoginFormPage,
  ProConfigProvider,
  ProFormCaptcha,
  ProFormCheckbox,
  ProFormText,
} from '@ant-design/pro-components';
import {styled} from 'styled-components';
import {Button, Tabs, message} from 'antd';
import { useState} from 'react';
import {STATIC_RESOURCE, AUTH_CLIENT_ICON_MAPPING} from './constants.jsx';
import useI18NPrefix from '../../hooks/useI18NPrefix.js';
import {encryptPassword} from "../../../utils/auth";

export function LoginForm({onLogin}) {
  const [loginType, setLoginType] = useState('account');

  const t = useI18NPrefix('login');
  const g = useI18NPrefix('global');
  const containerStyle = {
    backgroundColor: 'rgba(255,255,255,0.25)',
    backdropFilter: 'blur(4px)',
  }

  /** 左下角的活动面板 */
  const activityConfig = {
    boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.2)',
    borderRadius: 8,
    backgroundColor: 'rgba(255,255,255,0.25)',
    backdropFilter: 'blur(4px)',
  }

  const onFinish=(values)=>{
    const {userName,password}=values
    onLogin({
      userName,
      password:encryptPassword(password)
    })
  }

  return (
    <ProConfigProvider hashed={false}>
      <LoginContent>
        <LoginFormPage
          title={t("title")}
          subTitle={t("subTitle")}
          logo={STATIC_RESOURCE.LOGO}
          backgroundImageUrl={STATIC_RESOURCE.BACKGROUND_VIDEO_URL}
          containerStyle={containerStyle}
          onFinish={onFinish}
          // activityConfig={{
          //   style: activityConfig,
          //   title: t("activity.title"),
          //   subTitle: t("activity.subTitle"),
          //   action: <ActivityButton size="large" children={t("activity.action")}/>,
          // }}
          // actions={
          //   <ActionsPanel>
          //     <Divider plain>
          //       <Spilt>
          //         {t("actions")}
          //       </Spilt>
          //     </Divider>
          //     <Space align="center" size={24}>
          //       <AuthIconContent children={AUTH_CLIENT_ICON_MAPPING.ALIPAY}/>
          //       <AuthIconContent children={AUTH_CLIENT_ICON_MAPPING.TAOBAO}/>
          //       <AuthIconContent children={AUTH_CLIENT_ICON_MAPPING.WEIBO}/>
          //     </Space>
          //   </ActionsPanel>
          // }
        >
          <Tabs
            centered
            activeKey={loginType}
            onChange={(activeKey) => setLoginType(activeKey)}
          >
            <Tabs.TabPane key={'account'} tab={t("method.account")}/>
            <Tabs.TabPane key={'phone'} tab={t("method.phone")}/>
          </Tabs>
          {loginType === 'account' && (
            <>
              <ProFormText
                name="userName"
                fieldProps={{
                  size: 'large',
                  prefix: AUTH_CLIENT_ICON_MAPPING.USER,
                }}
                placeholder={g("placeholder.account")}
                rules={[
                  {
                    required: true,
                    message: g("validation.required"),
                  },
                ]}
              />
              <ProFormText.Password
                name="password"
                fieldProps={{
                  size: 'large',
                  prefix: AUTH_CLIENT_ICON_MAPPING.LOCK
                }}
                placeholder={g("placeholder.password")}
                rules={[
                  {
                    required: true,
                    message: g("validation.required"),
                  },
                ]}
              />
            </>
          )}
          {loginType === 'phone' && (
            <>
              <ProFormText
                fieldProps={{
                  size: 'large',
                  prefix: AUTH_CLIENT_ICON_MAPPING.MOBILE
                }}
                name="mobile"
                placeholder={g("placeholder.phone")}
                rules={[
                  {
                    required: true,
                    message: g("validation.required"),
                  },
                  {
                    pattern: /^1\d{10}$/,
                    message: g("validation.formatErr"),
                  },
                ]}
              />
              <ProFormCaptcha
                fieldProps={{
                  size: 'large',
                  prefix: AUTH_CLIENT_ICON_MAPPING.LOCK,
                }}
                captchaProps={{
                  size: 'large',
                }}
                placeholder={g("placeholder.authCode")}
                captchaTextRender={(timing, count) => {
                  if (timing) {
                    return `${count} ${t("method.getAuth")}`;
                  }
                  return t("method.getAuth");
                }}
                name="captcha"
                rules={[
                  {
                    required: true,
                    message: g("validation.formatErr"),
                  },
                ]}
                onGetCaptcha={async () => {
                  message.success('获取验证码成功！验证码为：1234');
                }}
              />
            </>
          )}
          <Hint>
            <ProFormCheckbox noStyle name="autoLogin" children={t("autoLogin")}/>
            <ForgetPassword children={t("forgetPassword")}/>
          </Hint>
        </LoginFormPage>
      </LoginContent>
    </ProConfigProvider>
  );
}

const ActivityButton = styled(Button)`
  border-radius: 20px;
  color: ${p => p.theme.colorPrimary};
  width: 120px;
`;

const ActionsPanel = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
`;

const LoginContent = styled.div`
  background-color: ${p=>p.theme.mainTheme};
  height: 100vh;
`;

const Spilt = styled.div`
  font-weight: normal;
  font-size: 14px;
`;

const AuthIconContent = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 40px;
  width: 40px;
  border: 1px solid ${p => p.theme.colorPrimaryBorder};
  border-radius: 50%;
`;

const ForgetPassword = styled.a`
  float: right;
`;

const Hint = styled.div`
  margin-block-end: 24px;
`;

