import React, { useState, useEffect, useCallback } from 'react';
import classNames from 'classnames/bind';
import styles from './Login.scss';
import Tab from '@src/components/common/Tab';
import { useHistory } from 'react-router';
import URLInfo from '@src/constants/URLInfo';
import { ELoginTabType, ESNSType, loginTabList } from '@src/constants/Login';
import APIs from '@src/api/APIs';
import axios from 'axios';
import { ACCESS_TOKEN } from '@src/constants/Cookie';
import { isLocal, LOCAL_ENDPOINT } from '@src/constants/NodeEnv';
import Input from '@src/components/common/Input';
import CookieUtil from '@src/utils/CookieUtil';

const cx = classNames.bind(styles);

interface IOwnProps { };

const Login: React.FC<IOwnProps> = ({ }) => {
  const history = useHistory();
  const [selectedTab, setSelectedTab] = useState<string>(ELoginTabType.LOGIN);
  const [developerEmail, setDeveloperEmail] = useState<string>('');

  useEffect(() => {
    if (history.location.pathname === URLInfo.LOGIN) {
      setSelectedTab(ELoginTabType.LOGIN);
    } else {
      setSelectedTab(ELoginTabType.REGISTER);
    }
  }, []);

  useEffect(() => {
    if (selectedTab === ELoginTabType.REGISTER) {
      history.push(URLInfo.REGISTER);
    }

    if (selectedTab === ELoginTabType.LOGIN) {
      history.push(URLInfo.LOGIN);
    }
  }, [selectedTab]);

  const handleClickLogin = async (type: ESNSType) => {
    await APIs.fetchSNSRedirectUrl(type)
      .then((res) => {
        window.location.href = res;
      });
  };

  const handleClickTempLogin = async () => {
    // await axios.get('https://apibeta.meta-rare.net/v1/user/authenticate/temp?email=wonb1126%40gmail.com').then((res: any) => {
    //   CookieUtil.getCookie(ACCESS_TOKEN, res.data.access_token);
    //   window.location.href = URLInfo.HOME;
    // });
    await axios.get(`${LOCAL_ENDPOINT}/v1/user/authenticate/temp?email=${developerEmail}`).then((res: any) => {
      CookieUtil.setCookie(ACCESS_TOKEN, res.data.access_token, CookieUtil.inOneHours);
      window.location.href = URLInfo.HOME;
    })
      .catch((err) => {
        console.log(err.message)
      })
      .finally(() => {
        setDeveloperEmail('');
      })
  };
  const developerEmailHandler = useCallback((e) => {
    setDeveloperEmail(e.target.value)
  }, [developerEmail])

  return (
    <div className={cx('login')}>
      <Tab tabList={loginTabList} selectedTab={selectedTab} setSelectedTab={setSelectedTab} />
      <div className={cx('btn_area')}>
        {
          isLocal &&
          <>
            <Input className={cx('input')} placeholder={'개발자 이메일을 입력해주세요'} onChange={developerEmailHandler} value={developerEmail} />
            <button type="button" className={cx('btn', 'google')} onClick={handleClickTempLogin}>개발자 로그인</button>
          </>
        }
        <br />
        <br />
        <br />
        <button type="button" className={cx('btn', 'google')} onClick={() => handleClickLogin(ESNSType.GOOGLE)}>
          <img src="/static/img/png/ico_google.png" alt="" />
          {selectedTab === ELoginTabType.REGISTER ? 'Sign up with google ID' : 'Login with google ID'}
        </button>
        {/* <button type="button" className={cx('btn', 'kakao')}>
          <img src="/static/img/png/ico_kakao.png" alt="" />
          카카오 로 로그인 하기
        </button>
        <button type="button" className={cx('btn', 'metamask')} disabled>
          <img src="/static/img/png/ico_metamask.png" alt="" />
          Metamask 로 로그인 하기
        </button> */}
      </div>
    </div>
  );
};

export default Login;