import {
  Button,
  FieldError,
  Input,
  Label,
  Spinner,
  Surface,
  TextField,
  useThemeColor,
} from "heroui-native";
import { Text, View } from "react-native";

import { getErrorMessage, useNativeSignUpForm } from "./hooks";

type NativeSignupFormProps = {
  readonly onNavigateSignIn: () => void;
  readonly onSuccess?: () => void;
};

export const NativeSignupForm = ({
  onNavigateSignIn,
  onSuccess,
}: NativeSignupFormProps) => {
  const form = useNativeSignUpForm({ onSuccess });
  const foregroundColor = useThemeColor("foreground");
  const mutedColor = useThemeColor("muted");

  return (
    <Surface className="rounded-xl p-5" variant="secondary">
      <Text style={{ color: foregroundColor, fontSize: 24, fontWeight: "600", marginBottom: 4 }}>
        Create an account
      </Text>
      <Text style={{ color: mutedColor, fontSize: 14, marginBottom: 20 }}>
        Use your name, email, and password.
      </Text>

      <form.Subscribe
        selector={(state) => ({
          isSubmitting: state.isSubmitting,
          submitError: getErrorMessage(state.errorMap.onSubmit),
        })}
      >
        {({ isSubmitting, submitError }) => (
          <View style={{ gap: 16 }}>
            <FieldError className="mb-1" isInvalid={!!submitError}>
              {submitError}
            </FieldError>

            <form.Field name="name">
              {(field) => (
                <TextField>
                  <Label>Full name</Label>
                  <Input
                    autoCapitalize="words"
                    autoComplete="name"
                    onBlur={field.handleBlur}
                    onChangeText={field.handleChange}
                    placeholder="Jane Doe"
                    textContentType="name"
                    value={field.state.value}
                  />
                </TextField>
              )}
            </form.Field>

            <form.Field name="email">
              {(field) => (
                <TextField>
                  <Label>Email</Label>
                  <Input
                    autoCapitalize="none"
                    autoComplete="email"
                    keyboardType="email-address"
                    onBlur={field.handleBlur}
                    onChangeText={field.handleChange}
                    placeholder="you@example.com"
                    textContentType="emailAddress"
                    value={field.state.value}
                  />
                </TextField>
              )}
            </form.Field>

            <form.Field name="password">
              {(field) => (
                <TextField>
                  <Label>Password</Label>
                  <Input
                    autoComplete="new-password"
                    onBlur={field.handleBlur}
                    onChangeText={field.handleChange}
                    secureTextEntry
                    textContentType="newPassword"
                    value={field.state.value}
                  />
                </TextField>
              )}
            </form.Field>

            <form.Field name="confirmPassword">
              {(field) => (
                <TextField>
                  <Label>Confirm password</Label>
                  <Input
                    autoComplete="new-password"
                    onBlur={field.handleBlur}
                    onChangeText={field.handleChange}
                    onSubmitEditing={() => void form.handleSubmit()}
                    returnKeyType="go"
                    secureTextEntry
                    textContentType="newPassword"
                    value={field.state.value}
                  />
                </TextField>
              )}
            </form.Field>

            <Button
              className="mt-1"
              isDisabled={isSubmitting}
              onPress={() => void form.handleSubmit()}
            >
              {isSubmitting ? (
                <Spinner color="default" size="sm" />
              ) : (
                <Button.Label>Create account</Button.Label>
              )}
            </Button>

            <Button onPress={onNavigateSignIn} variant="ghost">
              <Button.Label>Already have an account? Sign in</Button.Label>
            </Button>
          </View>
        )}
      </form.Subscribe>
    </Surface>
  );
};
