import { Button, ButtonText, ButtonIcon } from "../ui/button";
import {
  FormControl,
  FormControlLabel,
  FormControlLabelText,
} from "../ui/form-control";
import { MailIcon, ArrowRightIcon } from "../ui/icon";
import { Input, InputIcon, InputField } from "../ui/input";
import { VStack } from "../ui/vstack";
import React from "react";
import PasswordField from "./PasswordField";
import FormError from "./FormError";

export default function LoginForm() {
  const REQUIRED_ERROR = "Au moins un des champs requis est vide !";
  const [emailValue, setEmailValue] = React.useState("");
  const [isEmailInvalid, setIsEmailInvalid] = React.useState(false);
  const [passwordValue, setPasswordValue] = React.useState("");
  const [isPasswordInvalid, setIsPasswordInvalid] = React.useState(false);
  const [isFormInvalid, setIsFormInvalid] = React.useState(false);
  const handleSubmit = () => {
    //check for empty fields
    setIsEmailInvalid(emailValue == "");
    setIsPasswordInvalid(passwordValue == "");
    setIsFormInvalid(isEmailInvalid || isPasswordInvalid);
  };

  return (
    <FormControl className="gap-4" isInvalid={isFormInvalid}>
      <FormControl isInvalid={isEmailInvalid}>
        <FormControlLabel>
          <FormControlLabelText bold={true}>Adresse mail</FormControlLabelText>
        </FormControlLabel>
        <Input variant="outline" size="xl">
          <InputIcon color="black" as={MailIcon} />
          <InputField
            value={emailValue}
            onChangeText={setEmailValue}
            placeholder="Test@optifit.com"
          />
        </Input>
      </FormControl>
      <FormControl isInvalid={isPasswordInvalid}>
        <FormControlLabel>
          <FormControlLabelText bold={true}>Mot de passe</FormControlLabelText>
        </FormControlLabel>
        <PasswordField value={passwordValue} onChangeText={setPasswordValue} />
      </FormControl>
      <VStack>
        <FormError text={REQUIRED_ERROR} />
        <Button size="xl" onPress={handleSubmit}>
          <ButtonText>Se connecter</ButtonText>
          <ButtonIcon as={ArrowRightIcon} />
        </Button>
      </VStack>
    </FormControl>
  );
}