import {
  BaseBox,
  BoxButtonOnFooter,
  ButtonCustom,
  Grid,
  OS_Wrapper,
  TextCustom,
  TextInputCustom,
} from "@/components";
import { MainColor } from "@/constants/color-palet";
import { ICON_SIZE_SMALL } from "@/constants/constans-value";
import { LOCAL_STORAGE_KEY } from "@/constants/local-storage-key";
import { useAuth } from "@/hooks/use-auth";
import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
import { Ionicons } from "@expo/vector-icons";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { router, useLocalSearchParams } from "expo-router";
import { useState } from "react";
import Toast from "react-native-toast-message";

export default function InvestmentInputDonation() {
  const { user } = useAuth();
  const { id } = useLocalSearchParams();
  const [nominal, setNominal] = useState<number>(0);

  const handlerSubmit = async () => {
    if (!user?.id) {
      Toast.show({
        type: "error",
        text1: "User tidak ditemukan",
      });

      return;
    }
    try {
      await AsyncStorage.setItem(
        LOCAL_STORAGE_KEY.transactionDonation,
        JSON.stringify({ nominal: nominal.toString() }),
      );
      router.replace(`/donation/${id}/select-bank`);
    } catch (error) {
      console.log("[ERROR]", error);
    }
  };

  const displayJumlah = formatCurrencyDisplay(nominal);

  const handleChangeCurrency = (text: string) => {
    const numeric = text.replace(/\D/g, "");
    setNominal(Number(numeric));
  };

  const bottomComponent = (
    <BoxButtonOnFooter>
      <ButtonCustom
        disabled={nominal < 10000 || nominal === 0}
        onPress={() => {
          handlerSubmit();
        }}
      >
        Lanjutan
      </ButtonCustom>
    </BoxButtonOnFooter>
  );
  return (
    <>
      <OS_Wrapper enableKeyboardHandling contentPaddingBottom={250} footerComponent={bottomComponent}>
        {listData.map((item, i) => (
          <BaseBox key={i} onPress={() => setNominal(item.value)}>
            <Grid>
              <Grid.Col span={8}>
                <TextCustom bold size="large">
                  Rp. {item.label}
                </TextCustom>
              </Grid.Col>
              <Grid.Col span={4}>
                <Ionicons
                  name="chevron-forward"
                  size={ICON_SIZE_SMALL}
                  color={MainColor.yellow}
                  style={{ alignSelf: "flex-end" }}
                />
              </Grid.Col>
            </Grid>
          </BaseBox>
        ))}

        <BaseBox>
          <TextInputCustom
            keyboardType="numeric"
            label="Nominal lainnya"
            placeholder="0"
            iconLeft="Rp."
            value={displayJumlah}
            onChangeText={(value) => handleChangeCurrency(value)}
          />
          <TextCustom size="small" color="gray">
            Minimal donasi Rp. 10.000
          </TextCustom>
        </BaseBox>
      </OS_Wrapper>
    </>
  );
}

const listData = [
  {
    label: "25.000",
    value: 25000,
  },
  {
    label: "50.000",
    value: 50000,
  },
  {
    label: "100.000",
    value: 100000,
  },
  {
    label: "250.000",
    value: 250000,
  },
];