import React, { useEffect, useState } from "react";
import { CheckBox, View, Text } from "react-native";
import { useFormikContext } from "formik";
import colors from "../../config/colors";
import { TouchableOpacity } from "react-native-gesture-handler";
import ErrorMessage from "./ErrorMessage";
import { dimensions } from "../../config/dimensions";

const Checkbox = ({ name, children, navigate, ...props }) => {
  const { setFieldValue, errors, touched } = useFormikContext();
  const [toggleCheckBox, setToggleCheckBox] = useState(false);

  useEffect(() => {
    setFieldValue(name, toggleCheckBox, true);
  }, [toggleCheckBox]);

  return (
    <View>
      <View
        style={{
          flexDirection: "row",
          alignItems: "center",
        }}
      >
        <View width={35}>
        <CheckBox
          value={toggleCheckBox}
          onValueChange={(newValue) => setToggleCheckBox(newValue)}
          type={"checkbox"}
          tintColors={{ true: colors.primary }}
          onCheckColor={colors.primary}
          {...props}
        />
          </View>

        <TouchableOpacity
          onPress={() => {
            setToggleCheckBox(!toggleCheckBox);
          }}
        >
          <Text
            style={{
              fontSize: dimensions.text.default,
              color: colors.medium,
            }}
          >Li e estou de acordo com os{" "}</Text>
        </TouchableOpacity>
      </View>

      <TouchableOpacity onPress={() => navigate()}>
        <Text
          style={{
            marginLeft: 35,
            color: colors.lightBlue,
            fontSize: dimensions.text.default,
          }}
        >Termos de uso e condições</Text>
      </TouchableOpacity>
      <ErrorMessage error={errors[name]} visible={touched[name]} />
    </View>
  );
};

export default Checkbox;