import React, { useState } from 'react'
import './logreg.style.css'
import Loading from './loading'
import Navbar from '../../components/Header/Navbar'
import FooterSmall from '../../components/Footer/FooterSmall'
import '../../../node_modules/reactjs-popup/dist/index.css'
import Popup from 'reactjs-popup'

import Eye from '../../assets/Eye.png'
import Spinner from 'react-bootstrap/Spinner'
import { GoogleLogin } from 'react-google-login'
import GoogleIcon from '../../assets/logreg/google-icon2.png'
//actions import
import { register } from '../../actions/auth.actions'
import { sendVerEmail } from '../../actions/auth.actions'
import { login } from '../../actions/auth.actions'
import leftlowerIcon from '../../assets/logreg/ne2.png'

const LogReg = () => {
  //states and handler for register
  const [emailR, setEmailR] = useState('')
  const [usernameR, setUsernameR] = useState('')
  const [passwordR, setPassWordR] = useState('')
  const [msgR, setmsgR] = useState('')
  const [togR, setTogR] = useState(true)
  const [loaderR, setLoaderR] = useState(false)
  let err = localStorage.getItem('err')
  localStorage.removeItem('err')
  async function Register(e) {
    e.preventDefault()
    if (passwordR.length < 1 || usernameR.length < 1 || emailR.length < 1) {
      alert('Fields should not remain blank')
      return
    }
    setLoaderR(true)

    const data = await register(emailR, usernameR, passwordR)
    //console.log(data)
    if (data.status === 'OK') {
      setmsgR('Successful, verify your email')
    } else if (data.status == 'FAILED') {
      setmsgR(data.error)
    } else {
      let msg = ''
      if (data.email) {
        msg = msg + ' email:' + data.email[0] + '\n'
      }
      if (data.username) {
        msg = msg + ' username :' + data.username[0] + '\n'
      }
      if (data.password) {
        msg = msg + ' password :' + data.password[0]
      }
      setmsgR(msg)
    }
    setLoaderR(false)
  }
  async function handleGoogleSuccess(response) {
    // console.log("onSuccess");
    const c = await response.tokenId
    // console.log(c);
    const resp = await fetch(
      'https://api.codedigger.tech/social_auth/google/',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          auth_token: c,
        }),
      }
    )
    const data = await resp.json()
    //console.log(data);
    if (resp.status !== 200) {
      alert(data.detail)
    } else {
      localStorage.setItem(
        'creds',
        JSON.stringify({
          access: data.tokens.access,
          refresh: data.tokens.refresh,
          first: data.first_time,
          username: data.username,
        })
      )
      if (data.first_time === true) {
        window.location = '/profile/:id'
      } else {
        window.location = '/home'
      }
      //console.log(c);
    }
  }
  function handleGoogleFail(response) {
    // console.log(response)
    alert('failed')
  }

  async function Sendagain(e) {
    e.preventDefault()
    setLoaderR(true)
    const data = await sendVerEmail(emailR)
    // console.log(data);

    setLoaderR(false)
    setmsgR(data.result)
  }

  //states and handler for login
  const [usernameL, setUserNameL] = useState('')
  const [passwordL, setpasswordL] = useState('')
  const [msgL, setmsgL] = useState('')
  const [first, setFirst] = useState(false)
  const [togL, setTogL] = useState(true)
  const [loaderL, setLoaderL] = useState(false)

  async function Login(e) {
    e.preventDefault()
    if (usernameL.length < 1 || passwordL.length < 1) {
      alert('Fields should not remain blank')
      return
    }
    setLoaderL(true)
    const data = await login(usernameL, passwordL)
    // console.log(data);
    if (data.status == 'FAILED') {
      setmsgL(data.error)
    } else if (data.tokens) {
      setmsgL(`Hello, ${usernameL}`)
      localStorage.setItem(
        'creds',
        JSON.stringify({
          access: data.tokens.access,
          refresh: data.tokens.refresh,
          first: data.first_time_login,
          username: usernameL,
        })
      )

      if (data.first_time_login === true) {
        window.location = '/profile/:id'
      } else {
        window.location = '/home'
      }
    } else if (data.password) {
      setmsgL('Password :' + data.password[0])
    } else if (data.username) {
      setmsgL('Username :' + data.username[0])
    }

    setLoaderL(false)
  }

  const switchers = [...document.querySelectorAll('.switcher')]
  const [show, setShow] = useState(true)
  switchers.forEach((item) => {
    item.addEventListener('click', function () {
      switchers.forEach((item) =>
        item.parentElement.classList.remove('is-active')
      )
      this.parentElement.classList.add('is-active')
    })
  })

  setTimeout(() => {
    setShow(false)
  }, 1000)

  return (
    <>
      <Navbar />
      <br></br>
      <br></br>
      <br></br>
      {err ? (
        <Popup open={true}>
          <div
            style={{ color: 'white', backgroundColor: 'black', padding: '4px' }}
          >
            {err}
          </div>
        </Popup>
      ) : (
        <></>
      )}
      <div>
        {show ? (
          <Loading />
        ) : (
          <>
            {/**start */}
            <div
              style={{
                alignItems: 'center',
                float: 'left',
                width: '40%',
                paddingLeft: '60px',
              }}
            >
              <img
                src={leftlowerIcon}
                style={{
                  marginLeft: '50px',
                  width: '480px',
                  height: '480px',
                  marginTop: '65px',
                }}
              ></img>
            </div>

            <div className="ContBody">
              <section className="forms-section">
                <div className="forms">
                  <div className="form-wrapper is-active">
                    <button type="button" className="switcher switcher-login">
                      Login
                      <span className="underline"></span>
                    </button>

                    <form className="form form-login">
                      <fieldset>
                        <legend>
                          Please, enter your email and password for login.
                        </legend>
                        <div className="input-block">
                          <label for="login-email">Username</label>
                          <input
                            required
                            onChange={(e) => setUserNameL(e.target.value)}
                            id="login-email"
                            type="text"
                            required
                          />
                        </div>
                        <div className="input-block">
                          <label for="login-password">Password</label>

                          <input
                            required
                            onChange={(e) => setpasswordL(e.target.value)}
                            id="login-password"
                            type={togL ? 'password' : 'text'}
                            required
                          ></input>

                          <span class="field-icon toggle-password">
                            <img
                              style={{ marginRight: '4px' }}
                              src={Eye}
                              onClick={(e) => {
                                e.preventDefault()
                                setTogL(!togL)
                              }}
                              className="eye"
                            ></img>
                          </span>
                        </div>
                      </fieldset>
                      {msgL.length > 0 ? (
                        <Popup open={true}>
                          <div
                            style={{
                              color: 'white',
                              backgroundColor: 'black',
                              padding: '4px',
                            }}
                          >
                            {msgL}
                          </div>
                        </Popup>
                      ) : (
                        <></>
                      )}

                      <button
                        onClick={Login}
                        type="submit"
                        className="btn-login"
                      >
                        {loaderL ? 'Processing..' : 'Login'}
                      </button>
                      {loaderL ? (
                        <Spinner
                          className="loading-animation"
                          animation="border"
                        />
                      ) : (
                        <></>
                      )}
                      <div className="loginops">
                        <img
                          style={{
                            width: '35px',
                            height: '35px',
                            'margin-top': '4px',
                          }}
                          src={GoogleIcon}
                        ></img>
                        <GoogleLogin
                          clientId={process.env.REACT_APP_CLIENTID}
                          buttonText="Login with Google"
                          onSuccess={handleGoogleSuccess}
                          //onFailure={handleGoogleFail}
                          cookiePolicy={'single_host_origin'}
                          icon={false}
                        />
                      </div>
                      <br></br>
                      <div
                        style={{
                          display: 'block',
                          'text-align': 'center',
                          'font-size': '16px',
                        }}
                      >
                        <a href="/ForgPass">Forgot Password ?</a>
                      </div>
                    </form>
                  </div>
                  <div class="form-wrapper">
                    <button
                      type="button"
                      className="switcher switcher-signup"
                      onClick={() => {
                        const switchers = [
                          ...document.querySelectorAll('.switcher'),
                        ]

                        switchers.forEach((item) => {
                          item.addEventListener('click', function () {
                            switchers.forEach((item) =>
                              item.parentElement.classList.remove('is-active')
                            )
                            this.parentElement.classList.add('is-active')
                          })
                        })
                      }}
                    >
                      Register
                      <span className="underline"></span>
                    </button>

                    <form className="form form-signup">
                      {msgR === '' ||
                      msgR !== 'Successful, verify your email' ? (
                        <>
                          <fieldset>
                            <legend>
                              Please, enter your email, username and password
                              for sign up.
                            </legend>
                            <div className="input-block">
                              <label for="signup-email">E-mail</label>
                              <input
                                value={emailR}
                                onChange={(e) => setEmailR(e.target.value)}
                                id="signup-email"
                                type="email"
                                required
                              />
                            </div>
                            <div className="input-block">
                              <label for="username">Username</label>
                              <input
                                value={usernameR}
                                onChange={(e) => setUsernameR(e.target.value)}
                                id="username"
                                type="text"
                                required
                              />
                            </div>
                            <div className="input-block">
                              <label for="signup-password">Password</label>
                              <input
                                value={passwordR}
                                onChange={(e) => {
                                  setPassWordR(e.target.value)
                                }}
                                id="signup-password"
                                type={togR ? 'password' : 'text'}
                                required
                              />
                              <span class="field-icon toggle-password">
                                <img
                                  style={{ marginRight: '4px' }}
                                  src={Eye}
                                  onClick={(e) => {
                                    e.preventDefault()
                                    setTogR(!togR)
                                  }}
                                  className="eye"
                                ></img>
                              </span>
                            </div>
                          </fieldset>
                          {msgR.length > 0 ? (
                            <Popup open={true}>
                              <div
                                style={{
                                  color: 'white',
                                  backgroundColor: 'black',
                                  padding: '4px',
                                }}
                              >
                                {msgR}
                              </div>
                            </Popup>
                          ) : (
                            <></>
                          )}
                          <button
                            onClick={Register}
                            type="submit"
                            disable={loaderR}
                            className="btn-signup"
                          >
                            {' '}
                            {loaderR ? 'Processing..' : 'Register'}
                          </button>
                          {loaderR ? (
                            <Spinner
                              className="loading-animation"
                              animation="border"
                            />
                          ) : (
                            <></>
                          )}
                        </>
                      ) : (
                        <>
                          <h7 className="goodmsgs">{`We have sent you a verification link on ${emailR} (Please check your spam folder too!).`}</h7>
                          <br></br>
                          <h7 className="goodmsgs">{`Please verify your email and move to login. \n If you haven't recieved any mail regarding this, click here to send again.`}</h7>
                          <button className="goodmsgs" onClick={Sendagain}>
                            Send again
                          </button>
                        </>
                      )}
                    </form>
                  </div>
                </div>
              </section>
            </div>
            <FooterSmall />
          </>
        )}
      </div>
    </>
  )
}

export default LogReg