import './login.scss';

import * as log from 'loglevel';
import React, { useState } from 'react';
import { toast } from 'react-toastify';

import Input from '../../components/Input/input';
import {
  linkUser as linkUser_API,
  login as login_API,
  loginWithSMS as loginWithSMS_API,
} from '../../factory/api';
import useLocalStorage from '../../hooks/useLocalStorage';
import Button from '../Button/button';
import Transition from '../Transition/transition';

interface Props {
  visible: boolean;
}

const Login: React.FC<Props> = (props) => {
  const { visible } = props;
  const [userName, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [loginButtonText, setLoginButtonText] = useState('Login');
  const [token, setToken] = useLocalStorage<string>('token', '');
  const [auth, setAuth] = useLocalStorage<string>('X-USER-AUTH-ID', '');

  function showError(text: string) {
    setLoginButtonText('Login');
    toast.error('Login error');
    log.error(text);
  }
  function showSuccess(text: string) {
    setLoginButtonText('Login');
    toast.success('Login successful');
    log.info(text);
  }
  const signIn = async () => {
    setLoginButtonText('...');
    const linkUserF = async () => {
      try {
        const resAuth: any = await linkUser_API();
        if (resAuth.data.unsigned.resultInfo.code === 'SUCCESS') {
          setAuth(resAuth.data.unsigned.data.userAuthorizationId);
          showSuccess(JSON.stringify(resAuth));
        } else {
          showError(JSON.stringify(resAuth));
        }
      } catch (err) {
        showError(JSON.stringify(err));
      }
    };
    try {
      const res: any = await login_API({
        phoneNumber: userName,
        password: password,
      });
      if (
        res.data.header.resultCode === 'S0000' &&
        res.data.payload.accessToken
      ) {
        setToken(res.data.payload.accessToken);
        // TODO: setToken synchronously
        await new Promise((r) => setTimeout(() => r(), 100));
        linkUserF();
      } else if (res.data.header.resultCode === 'S1004') {
        // sign in for the fisrt time
        try {
          const resSms: any = await loginWithSMS_API({
            otpReferenceId: res.data.error.otpReferenceId,
            otp: '1234',
            type: 'PAYPAY',
          });
          if (
            resSms.data.header.resultCode === 'S0000' &&
            resSms.data.payload.accessToken
          ) {
            setToken(resSms.data.payload.accessToken);
            // TODO: setToken synchronously
            await new Promise((r) => setTimeout(() => r(), 100));
            linkUserF();
          }
        } catch (error) {
          showError(JSON.stringify(error));
        }
      } else {
        showError(JSON.stringify(res));
      }
    } catch (error) {
      showError(JSON.stringify(error));
    }
  };

  return (
    <>
      <Transition in={visible} animation="zoom-in-top" timeout={300}>
        <div className="paypay-login">
          <Input
            value={userName}
            onChange={(e) => setUsername(e.target.value)}
            placeholder="Username"
          />
          <Input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder="Password"
          />
          <Button
            className="login-btn"
            btnType="primary"
            onClick={signIn}
            disabled={userName.length === 0 || password.length === 0}
          >
            {loginButtonText}
          </Button>
          <div>
            <span>Access Token</span>
            <Input value={token} readOnly disabled></Input>
            <span>UAID</span>
            <Input value={auth} readOnly disabled></Input>
          </div>
        </div>
      </Transition>
    </>
  );
};

export default Login;