import * as SecureStore from "@/utils/SecureStore"
import { useRouter } from "expo-router"
import { useRef, useState } from "react"
import { Platform } from "react-native"
import { Button, Dialog, Portal, Surface, Text, TextInput } from "react-native-paper"

export default function Login() {
  const router = useRouter()
  const [name, setName] = useState(SecureStore.getItem('apiName') ?? "")
  const [password, setPassword] = useState("")
  const [errorDialogVisible, setErrorDialogVisible] = useState(false)
  const [errorTitle, setErrorTitle] = useState("")
  const [errorText, setErrorText] = useState("")

  const loginRef = useRef<any | null>()
  const passwordRef = useRef<any | null>()

  const hideErrorDialog = () => setErrorDialogVisible(false)

  async function onLogin() {
    const resp = await fetch("http://192.168.1.198:3000/auth/login/", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name: name, password: password })
    })
    .then(resp => resp.json())
    .catch(err => {
      setErrorDialogVisible(true)
      setErrorTitle("Erreur")
      setErrorText("Une erreur inconnue est survenue lors de la connexion. Veuillez réessayer plus tard. " + err)
    })
    if (!resp)
      return
    else if (resp.error) {
      setErrorDialogVisible(true)
      setErrorTitle(resp.error)
      setErrorText(resp.message)
      return
    }
    SecureStore.setItem("apiName", name)
    if (Platform.OS !== "web") {
      // Le stockage navigateur n'est pas sûr, on évite de stocker un mot de passe à l'intérieur
      SecureStore.setItem("apiPassword", password)
    }
    SecureStore.setItem("apiToken", resp.accessToken)
    if (router.canGoBack())
      router.back()
    else
      router.navigate('/')
  }

  return (
    <Surface style={{ flex: 1 }}>
      <TextInput
          ref={loginRef}
          label="Nom"
          value={name}
          onChangeText={(text) => setName(text)}
          onSubmitEditing={() => passwordRef?.current.focus()}
          style={{ margin: 8 }} />
      <TextInput
          ref={passwordRef}
          label="Mot de passe"
          value={password}
          onChangeText={(text) => setPassword(text)}
          onSubmitEditing={onLogin}
          secureTextEntry={true}
          style={{ margin: 8 }} />
      <Button onPress={onLogin} mode="contained" icon="login" style={{ margin: 8 }}>
        Se connecter
      </Button>
      <Portal>
        <Dialog visible={errorDialogVisible} onDismiss={hideErrorDialog}>
          <Dialog.Title>{errorTitle}</Dialog.Title>
          <Dialog.Content>
            <Text variant="bodyMedium">{errorText}</Text>
          </Dialog.Content>
          <Dialog.Actions>
            <Button onPress={hideErrorDialog}>Ok</Button>
          </Dialog.Actions>
        </Dialog>
      </Portal>
    </Surface>
  )
}