import React, { useState } from "react";
import { Button as ReactBtn, View } from "react-native";
import {
  Icons,
  Text,
  Loader,
  showToast,
  Button,
  Input,
  Carousel,
  Header,
  PhonePad,
} from "@sasi368/reactnativeappcomponents";
const { Icon, AppIcons } = Icons;
const theme = {
  theme: "light",
  background: "white",
  cardBackground: "#f6f6f6",
  text: "black",
};

interface onChange {
  text: any;
  input: any;
  isTrim?: boolean;
}
interface errValues {
  error?: any;
  input?: any;
}

const App = () => {
  const [amount, setAmount] = useState(0);
  const [inputs, setInputs] = useState({
    number: "",
    phoneCode: "",
  });
  const [errors, setErrors] = useState({});
  const onChangeValues = ({ text, input, isTrim }: onChange) => {
    return {
      values: (prevState: any) => ({
        ...prevState,
        [input]:
          isTrim != undefined
            ? isTrim == false
              ? text
              : text.trimEnd()
            : text,
      }),
    };
  };
  const errorValues = ({ error, input }: errValues) => {
    return {
      errors: (prevState: any) => ({ ...prevState, [input]: error }),
    };
  };
  const handleOnchange = (text: string | boolean, input: string) => {
    const { values } = onChangeValues({ text, input });
    setInputs(values);
  };
  const handleError = (error: any, input: any) => {
    const { errors } = errorValues({ error, input });
    setErrors(errors);
  };

  const banners = [
    {
      image: require(""), // or "imageurl"
    },
  ];
  return (
    <View style={{ flex: 1 }}>
      {/* For Header */}
      <Header
        name={"Home"}
        navScreen={"back"}
        leftImage={"arrow-back"}
        leftImageType={AppIcons.Ionicons}
        rightImage={"infocirlce"}
        rightImageType={AppIcons.AntDesign}
        theme={theme}
        // useNavigation={useNavigation()} inside NavigationContainer
      />

      {/* For Icons */}
      <Icon
        type={AppIcons.AntDesign}
        name={"checkcircle"}
        size={20}
        color={"black"}
        style={{ alignSelf: "center" }}
      />

      {/* For Text */}
      <Text
        textType="semiBold12"
        style={{
          color: "black",
          textAlign: "center",
        }}
      >
        Hi
      </Text>

      {/* For Loader */}
      <Loader loading={false} />

      {/* For Toast */}
      <ReactBtn
        onPress={() => {
          showToast("Hi");
        }}
        title="show Toast"
      />

      {/* For Button */}
      <Button
        borderRadius={10}
        fontSize={12}
        backgroundColor={"grey"}
        fontColor={"#ffffff"}
        marginTop={20}
        height={45}
        alignSelf={"center"}
        value={"Sign In"}
        onPress={() => {}}
      />

      {/* For Input */}
      <Input
        keyboardType="number-pad"
        theme={theme}
        fontSize={12}
        placeholder={"Enter mobile number"}
        value={inputs?.number}
        onChangeText={(text: string) => handleOnchange(text, "number")}
        onFocus={() => {
          handleError(null, "number");
        }}
        error={"error message"}
        style={{ borderColor: "transparent" }}
        borderRadius={8}
        alignSelf={"center"}
        height={50}
        countryPicker={true}
        handleOnchange={handleOnchange}
      />

      {/* For Carousel */}
      <Carousel data={banners} autoPlay={true} pagination={true} />

      {/* For PhonePad */}
      <PhonePad setAmount={setAmount} amount={amount} theme={theme} />
    </View>
  );
};