import { useState, useEffect } from "react";
import styled from "@emotion/styled";
import FormControl from '@mui/material/FormControl';
import OutlinedInput from '@mui/material/OutlinedInput';

import TextField from '@mui/material/TextField';
import FormHelperText from '@mui/material/FormHelperText';

import InputAdornment from '@mui/material/InputAdornment';
import IconButton from '@mui/material/IconButton';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import Visibility from '@mui/icons-material/Visibility';

import FullScreen from '../components/FullScreen';
import Content from '../components/Content';
import Button from '../components/Button';
import { useLoggerContext } from "../contexts/Logger"
import { useAPIContext } from "../contexts/API"

const Container = styled(Content)`
  background-color: #494949;
  width: 85%;
  max-width: 600px;
  padding: 30px calc(min(100px, 10%));
`;

const formStyle = {
  width: '100%',
  "& .MuiInputBase-input": {
    backgroundColor: '#fff'
  },
  '& fieldset': { borderRadius: 0 },
  "& .MuiFormHelperText-root": { //<--- here
    width: '50%',
    //fontSize: 12,
    color: '#fff',
    height: 0
  }
};

export default function Register(){
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [fetching, setFetching] = useState(false);
  const { setLogState } = useLoggerContext();
  const { setCookie, request } = useAPIContext();
  const [showPassword, setShowPassword] = useState(false);

  const [formatCorrect, setFormatCorrect] = useState(false);

  function submit() {
    if (check_email_format(username)) {
      register();
    }
    else
      unsuccessful("信箱格式錯誤");
  }

  function keypress({ key }){
    if (key === 'Enter'){
      submit();
    }
  }

  function unsuccessful(reason){
    setLogState({
      severity: 'error',
      content: reason
    });
  }

  function check_email_format(s){
    const email_regex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/gi;
    return email_regex.test(s);
  }


  const handleOnInput = (e) => {
    setUsername(e.target.value);
    setFormatCorrect(check_email_format(e.target.value));
  };

  // when trigered by clicking or enter,
  // this function set fetching to true, and rerender the page
  // and when every time we call this as a routine to check whether a request job exist.

  async function register(){
    setFetching(true);
    try{
      // TODO connect to correct endpoint
      // TODO check if this email exists in DB already
      let v = 1;
      while (v < 1000000000) {
        ++v;
        if (v % 10000000 == 0)
          console.log(v);
      }
      let res = await request('/authentication', {
        method: 'POST',
        body: JSON.stringify({ username, password })
      });

      if(res.ok){
        res = await res.json();
        console.log(res);
        if(res.status !== 'Success') return unsuccessful("Error2");
        setCookie('user', res.token);
      }else unsuccessful('Error1');

    }finally{
      setFetching(false);
    }
  }

  return (
    <FullScreen>
      <Container>

        <h2>信箱</h2>

        <FormControl sx={formStyle} variant='outlined'>
          <TextField
            error={!formatCorrect && username !== ''}
            placeholder='example@domain.com'
            autoComplete='email'
            autoFocus
            onKeyDown={keypress}
            type='email'
            value={username}
            size="small"
            inputProps={{
              min: "0",
              onInput: handleOnInput
            }}
            variant='outlined'
          />
        </FormControl>

        <Button
          style={{ color: '#494949', marginTop: '25px' }}
          variant="contained"
          color="secondary"
          onClick={submit}
          disabled={fetching}
          disabledColor="#ffd800"
          loading={fetching}
          // disabled={username.length * password.length === 0}
        >註冊</Button>

      </Container>
    </FullScreen>
  );
}