import * as React from "react";
import { Image, View, ScrollView } from "react-native";
import { Button } from "~/components/ui/button";
import { Progress } from "~/components/ui/progress";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
import { Text } from "~/components/ui/text";
import {
  ArrowLeftIcon,
  CircleDollarSign,
  LucideEye,
} from "lucide-react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { useTranslation } from "react-i18next";

export default function CrowdFund() {
  const [value, setValue] = React.useState("overview");
  const { t } = useTranslation();
  return (
    <SafeAreaView className="flex my-10 space-y-10 overflow-y-scroll">
      <ScrollView className="space-y-2">
        <View className="flex items-left px-5 space-y-3 w-full">
          <Image
            source={{
              uri: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
            }}
            alt=""
            className="w-full h-[200px] object-cover rounded"
          />
        </View>

        <View className="flex-1 justify-center px-5 mt-3">
          <Tabs
            value={value}
            onValueChange={setValue}
            className="w-full max-w-[400px] mx-auto flex-col gap-1.5"
          >
            <TabsList className="flex-row w-full">
              <TabsTrigger value="overview" className="flex-1">
                <Text className="font-dmsans">
                  {t("crowdfunding.tabsOverview")}
                </Text>
              </TabsTrigger>
              <TabsTrigger value="campagin" className="flex-1">
                <Text className="font-dmsans">
                  {t("crowdfunding.tabsCampaign")}
                </Text>
              </TabsTrigger>
              <TabsTrigger value="faq" className="flex-1">
                <Text className="font-dmsans">{t("crowdfunding.tabsFaq")}</Text>
              </TabsTrigger>
            </TabsList>
            <TabsContent value="overview">
              <View className="space-y-3 mt-3">
                <Text className="text-xl font-dmsans text-primary">
                  {t("crowdfunding.title")}
                </Text>
                <Text className="text-sm font-dmsans-light">
                  {t("crowdfunding.description")}
                </Text>
                <View className="py-5">
                  <Progress value={87} className="w-full " />
                </View>

                <View className="flex flex-row space-x-3">
                  <View className="flex space-y-1">
                    <Text className="text-base font-dmsans-bold text-secondary">
                      {t("crowdfunding.pledgedAmount")}
                    </Text>
                    <Text className="text-sm font-dmsans-light text-primary">
                      {t("crowdfunding.pledgedOf", { target: "1,000,000" })}
                    </Text>
                  </View>

                  <View className="flex space-y-1">
                    <Text className="text-base font-dmsans-bold text-secondary">
                      1,000
                    </Text>
                    <Text className="text-sm font-dmsans-light text-primary">
                      {t("crowdfunding.backersCountLabel")}
                    </Text>
                  </View>
                  <View className="flex space-y-1">
                    <Text className="text-base font-dmsans-bold text-secondary">
                      32
                    </Text>
                    <Text className="text-sm font-dmsans-light text-primary">
                      {t("crowdfunding.daysToGoLabel")}
                    </Text>
                  </View>
                </View>
              </View>
            </TabsContent>
            <TabsContent value="campagin">
              <View className="space-y-3 mt-3">
                <View className="space-y-3">
                  <Label className=" text-base font-dmsans-medium">
                    {t("crowdfunding.emailLabel")}
                  </Label>

                  <Input
                    aria-aria-labelledby="name"
                    className="font-dmsans"
                    placeholder={t("crowdfunding.emailPlaceholder")}
                  />
                  <Label className=" text-base font-dmsans-medium">
                    {t("crowdfunding.otpLabel")}
                  </Label>
                  <Input
                    aria-aria-labelledby="name"
                    className="font-dmsans"
                    placeholder={t("crowdfunding.otpPlaceholder")}
                  />
                  <Label className=" text-base font-dmsans-medium">
                    {t("crowdfunding.passwordLabel")}
                  </Label>
                  <View className="flex flex-row justify-between items-center space-x-3">
                    <Input
                      placeholder={t("crowdfunding.passwordPlaceholder")}
                    />
                    <Button className="bg-white border border-gray-300 rounded-md">
                      <LucideEye className="" />
                    </Button>
                  </View>
                  <Label className=" text-base font-dmsans-medium">
                    {t("crowdfunding.confirmPasswordLabel")}
                  </Label>
                  <View className="flex flex-row justify-between items-center space-x-3">
                    <Input
                      placeholder={t("crowdfunding.confirmPasswordPlaceholder")}
                    />
                    <Button className="bg-white border border-gray-300 rounded-md">
                      <LucideEye className="" />
                    </Button>
                  </View>
                </View>
                <Button className="bg-primary mt-5">
                  <Text className="font-dmsans">
                    {t("crowdfunding.resetButton")}
                  </Text>
                </Button>
                <Button className="bg-white border border-gray-800 border-dashed rounded-md">
                  <Text className="font-dmsans text-secondary">
                    {t("crowdfunding.resendButton")}
                  </Text>
                </Button>
              </View>
            </TabsContent>
            <TabsContent value="faq">
              <View className="space-y-3 mt-3">
                <View className="space-y-3">
                  <Label className=" text-base font-dmsans-medium">
                    {t("crowdfunding.emailLabel")}
                  </Label>

                  <Input
                    aria-aria-labelledby="name"
                    className="font-dmsans"
                    placeholder={t("crowdfunding.emailPlaceholder")}
                  />
                  <Label className=" text-base font-dmsans-medium">
                    {t("crowdfunding.otpLabel")}
                  </Label>
                  <Input
                    aria-aria-labelledby="name"
                    className="font-dmsans"
                    placeholder={t("crowdfunding.otpPlaceholder")}
                  />
                  <Label className=" text-base font-dmsans-medium">
                    {t("crowdfunding.passwordLabel")}
                  </Label>
                  <View className="flex flex-row justify-between items-center space-x-3">
                    <Input
                      placeholder={t("crowdfunding.passwordPlaceholder")}
                    />
                    <Button className="bg-white border border-gray-300 rounded-md">
                      <LucideEye className="" />
                    </Button>
                  </View>
                  <Label className=" text-base font-dmsans-medium">
                    {t("crowdfunding.confirmPasswordLabel")}
                  </Label>
                  <View className="flex flex-row justify-between items-center space-x-3">
                    <Input
                      placeholder={t("crowdfunding.confirmPasswordPlaceholder")}
                    />
                    <Button className="bg-white border border-gray-300 rounded-md">
                      <LucideEye className="" />
                    </Button>
                  </View>
                </View>
                <Button className="bg-primary mt-5">
                  <Text className="font-dmsans">
                    {t("crowdfunding.resetButton")}
                  </Text>
                </Button>
                <Button className="bg-white border border-gray-800 border-dashed rounded-md">
                  <Text className="font-dmsans text-secondary">
                    {t("crowdfunding.resendButton")}
                  </Text>
                </Button>
              </View>
            </TabsContent>
          </Tabs>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}