// @ts-nocheck
import * as React from "react";
import { useCallback } from "react";
import { View, Text, TouchableOpacity, ScrollView } from "react-native";
import Button from "../ui/button";
import Input from "../ui/text-field";
import { style } from "./style";
import { Tabs } from "../tabs";
import { LoginButttons } from "./login-buttons";
import { AUTH_PROVIDERS, authService } from "../../services/auth";
import { useSiteSettings } from "../../providers/site";
import Modal from "react-native-modal";

const ErrorMessage = ({
  show,
  children,
}: {
  show: boolean;
  children: string;
}) => {
  return (
    <>
      {show ? (
        <Text style={{ color: "#800", marginBottom: 10 }}>{children}</Text>
      ) : null}
    </>
  );
};

type LoginModalType = {
  open: boolean;
  onClose: () => void;
  onOpenOauth?: (provider: string) => void;
};

export const LoginModal = ({ open, onClose, onOpenOauth }: LoginModalType) => {
  const {
    style: siteStyle,
    regions: {
      header: { authentication },
    },
  } = useSiteSettings();
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [error, setError] = React.useState("");
  const [submitted, setSubmitted] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [currentTab, setCurrentTab] = React.useState("login");
  const onLoginButtonPressed = useCallback(
    (provider: keyof typeof AUTH_PROVIDERS) => {
      onClose();
      if (onOpenOauth) onOpenOauth(provider || "");
      // navigation.navigate('oauth-webview', {provider});
    },
    [onClose]
  );

  const onSubmit = useCallback(() => {
    setSubmitted(true);

    if (loading || !email || !password) {
      return;
    }
    setLoading(true);
    authService
      .maestroLogin(email, password)
      .then(() => {
        setLoading(false);
        onClose();
      })
      .catch((error) => {
        setLoading(false);
        setError(error.message);
      });
  }, [email, password, loading]);

  return (
    <Modal
      useNativeDriver
      animationIn="fadeInUp"
      animationInTiming={150}
      animationOut="fadeOutDown"
      animationOutTiming={150}
      style={{
        margin: 0,
      }}
      isVisible={open}
    >
      <View style={style.container}>
        <TouchableOpacity
          onPress={onClose}
          style={style.backdrop}
        ></TouchableOpacity>
        <ScrollView style={style.scrollContainer}>
          <View style={style.body}>
            {authentication.maestro ? (
              <Tabs
                activeTab={currentTab}
                onSetActiveTab={setCurrentTab}
                items={[
                  {
                    id: "login",
                    title: "Login",
                    content: (
                      <View style={style.content}>
                        <Input placeholder="Email" onChange={setEmail as any} />
                        <ErrorMessage show={submitted && !email}>
                          Email is required
                        </ErrorMessage>
                        <Input
                          placeholder="Password"
                          onChange={setPassword as any}
                          textContentType="password"
                        />
                        <ErrorMessage show={submitted && !password}>
                          Password is required
                        </ErrorMessage>
                        <ErrorMessage show={!!error.length}>
                          {error}
                        </ErrorMessage>
                        <View style={style.loginActions}>
                          <Text>I forgot my password</Text>
                          <Button
                            variant="outlined"
                            label={"Log in"}
                            loading={loading}
                            onPress={onSubmit as any}
                          />
                        </View>
                      </View>
                    ),
                  },
                  {
                    id: "signup",
                    title: "Sign up",
                    content: (
                      <View style={style.content}>
                        <Input placeholder="Email" />
                        <Input
                          placeholder="Password"
                          textContentType="password"
                        />
                        <Input
                          placeholder="Confirm Password"
                          textContentType="password"
                        />
                        <Button
                          label="Sign up"
                          variant="outlined"
                          onPress={onClose}
                        />
                      </View>
                    ),
                  },
                ]}
              ></Tabs>
            ) : null}
            <LoginButttons onPress={onLoginButtonPressed} />
            <View
              style={{
                ...style.poweredBy,
                backgroundColor: siteStyle.title_background_color,
              }}
            >
              <Text
                style={{
                  ...style.poweredByText,
                  color: siteStyle.title_text_color,
                }}
              >
                Powered by Maestro
              </Text>
            </View>
          </View>
        </ScrollView>
      </View>
    </Modal>
  );
};