import Styles from "@/constants/Styles";
import { apiGetDataHome } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { useQuery } from "@tanstack/react-query";
import { View } from "react-native";
import { PieChart } from "react-native-gifted-charts";
import Skeleton from "../skeleton";
import Text from "../Text";

type Props = {
   value: number;
   text: string;
   color: string;
}[]

export default function ChartProgresHome({ refreshing }: { refreshing: boolean }) {
   const { decryptToken, token } = useAuthSession()
   const { colors } = useTheme();

   // TanStack Query for Progress Chart data
   const { data: chartData = [], isLoading } = useQuery({
      queryKey: ['homeData', 'progress'],
      queryFn: async () => {
         const hasil = await decryptToken(String(token?.current))
         const response = await apiGetDataHome({ cat: "progress", user: hasil })
         return response.data.map((item: { color: any; text: any; value: any; }) => ({
            color: item.color,
            text: item.text,
            value: Number(item.value)
         })) as Props
      },
      enabled: !!token?.current,
      staleTime: 0,
   })

   return (
      <View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
         <Text style={[Styles.textSubtitle, Styles.mv15]}>PROGRES KEGIATAN</Text>
         {
            isLoading ? <Skeleton width={100} height={200} borderRadius={10} widthType="percent" />
               :
               <>
                  <PieChart
                     data={chartData}
                     showText
                     showValuesAsTooltipText
                     textColor={'black'}
                     radius={120}
                     textSize={15}
                     focusOnPress={false}
                     showValuesAsLabels
                     showTextBackground={false}
                     textBackgroundRadius={0}
                     isAnimated
                  />

                  <View style={[Styles.mt15]}>
                     <View style={[Styles.rowSpaceBetween, Styles.w80]}>
                        <View style={[Styles.rowItemsCenter, Styles.w60]}>
                           <View style={[Styles.iconContent, { backgroundColor: '#177AD5' }]}></View>
                           <Text style={[Styles.textInformation, Styles.ml10]}>Segera Dikerjakan</Text>
                        </View>

                        <View style={[Styles.rowItemsCenter, Styles.w50]}>
                           <View style={[Styles.iconContent, { backgroundColor: '#92cc76' }]}></View>
                           <Text style={[Styles.textInformation, Styles.ml10]}>Selesai</Text>
                        </View>
                     </View>
                     <View style={[Styles.rowSpaceBetween, Styles.w80, Styles.mt10]}>
                        <View style={[Styles.rowItemsCenter, Styles.w60]}>
                           <View style={[Styles.iconContent, { backgroundColor: '#fac858' }]}></View>
                           <Text style={[Styles.textInformation, Styles.ml10]}>Dikerjakan</Text>
                        </View>

                        <View style={[Styles.rowItemsCenter, Styles.w50]}>
                           <View style={[Styles.iconContent, { backgroundColor: '#ED6665' }]}></View>
                           <Text style={[Styles.textInformation, Styles.ml10]}>Dibatalkan</Text>
                        </View>
                     </View>
                  </View>
               </>
         }
      </View>
   )
}