# testUpdate

  Text,
  Container,
  Content,
  Item,
  Form,
  Input,
  Button,
  H1,
  Textarea,
} from "native-base";
import React, { useState } from "react";
import { StyleSheet } from "react-native";
import { colors } from "../../theme";
import API from "../../api";
import * as _ from "lodash";
// import AsyncStorage from "@react-native-community/async-storage";
import { navigate } from "../../RootNavigation";
import { useContext } from "react";
import { Context as AuthContext } from "../../context/AuthContext";

export default function Register() {
  const { signin } = useContext(AuthContext);
  const [state, setState] = useState({
    // fullname: "Shubham Kushwah",
    // phone: "1231231231",
    // email: "[e-mail]",
    // password: "Jmc@1234",
    // confirmPassword: "Jmc@1234",
    // address: "Some random address",
    // customer_id: "5f7c63df9cf768206ef52258", // JMC Hardcoded
  });
  const { fullname, phone, email, password, confirmPassword, address } = state;

  const handleChange = (name, value) => {
    setState((prev) => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async () => {
    const payload = _.pickBy(state);
    // console.log(state, payload);
    payload.address = [payload.address];
    const res = await API("/users/register/citizen", "POST", payload);
    if (res) {
      signin({ email, password });
      // AsyncStorage.setItem("token", res.accessToken);
      // navigate("userFlow");
    }
  };

  return (
    <Container>
      <Content style={{ padding: 32 }}>
        <Form>
          <H1 style={{ marginBottom: 32, marginTop: 8, color: colors.primary }}>
            Create an account
          </H1>
          <Item regular style={styles.item}>
            <Input
              keyboardType="name-phone-pad"
              placeholder="Full name"
              value={fullname}
              onChangeText={(e) => handleChange("fullname", e)}
            />
          </Item>
          <Item regular style={styles.item}>
            <Input
              keyboardType="phone-pad"
              placeholder="Phone number"
              value={phone}
              onChangeText={(e) => handleChange("phone", e)}
            />
          </Item>
          <Item regular style={styles.item}>
            <Input
              keyboardType="email-address"
              placeholder="Enter your email"
              value={email}
              onChangeText={(e) => handleChange("email", e)}
            />
          </Item>
          <Item regular style={styles.item}>
            <Input
              secureTextEntry
              placeholder="Create a password"
              value={password}
              onChangeText={(e) => handleChange("password", e)}
            />
          </Item>
          <Item regular style={styles.item}>
            <Input
              secureTextEntry
              placeholder="Confirm your password"
              value={confirmPassword}
              onChangeText={(e) => handleChange("confirmPassword", e)}
            />
          </Item>
          <Item regular style={styles.item}>
            <Textarea
              placeholder="Enter your address (optional)"
              rowSpan={3}
              value={address}
              onChangeText={(e) => handleChange("address", e)}
            />
          </Item>
          <Button
            full
            style={{ borderRadius: 3, backgroundColor: colors.primary }}
            onPress={handleSubmit}
          >
            <Text>Create Account</Text>
          </Button>
          <Button
            full
            transparent
            style={{ borderRadius: 3 }}
            onPress={() => navigate("login")}
          >
            <Text style={{ color: colors.primary }} uppercase={false}>
              Already have an account? Login
            </Text>
          </Button>
        </Form>
      </Content>
    </Container>
  );
}

const styles = StyleSheet.create({
  item: {
    borderRadius: 3,
    marginBottom: 16,
    paddingLeft: 8,
  },
});