import Styles from "@/constants/Styles";
import { apiGetDataHome } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { useEffect, useState } from "react";
import { Dimensions, View } from "react-native";
import { BarChart } from "react-native-gifted-charts";
import Skeleton from "../skeleton";
import Text from "../Text";

type Props = {
   value: number;
   label: string;
   frontColor: string;
}[]

export default function ChartDokumenHome({ refreshing }: { refreshing: boolean }) {
   const [loading, setLoading] = useState(true)
   const { decryptToken, token } = useAuthSession()
   const { colors } = useTheme();
   const [data, setData] = useState<Props>([])
   const [maxValue, setMaxValue] = useState(5)
   const [chartKey, setChartKey] = useState(0)
   const barData = [
      { value: 23, label: 'Gambar', frontColor: '#fac858' },
      { value: 12, label: 'Dokumen', frontColor: '#92cc76' },
   ];
   const width = Dimensions.get("window").width;


   async function handleData(loading: boolean) {
      try {
         setLoading(loading)
         const hasil = await decryptToken(String(token?.current))
         const response = await apiGetDataHome({ cat: "dokumen", user: hasil })
         const maxVal = response.data.reduce((max: number, obj: { value: number; }) => Math.max(max, Number(obj.value)), 0);
         const roundUp = maxVal > 0 ? Math.ceil(maxVal / 10) * 10 : 10;
         setMaxValue(roundUp)
         const convertedArray = response.data.map((item: { color: any; label: any; value: any; }) => ({
            frontColor: item.color,
            label: item.label,
            value: Number(item.value)
         }));
         setData(convertedArray)
         setChartKey((prev: number) => prev + 1)
      } catch (error) {
         console.error(error)
      } finally {
         setLoading(false)
      }
   }

   useEffect(() => {
      if (refreshing) {
         handleData(false)
      }
   }, [refreshing]);

   useEffect(() => {
      handleData(true)
   }, []);

   return (
      <View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
         <Text style={[Styles.textSubtitle, Styles.mv15]}>JUMLAH DOKUMEN</Text>
         {
            loading ? <Skeleton width={100} height={200} borderRadius={10} widthType="percent" />
               :
               <BarChart
                  key={chartKey}
                  showFractionalValues={false}
                  showYAxisIndices
                  noOfSections={4}
                  maxValue={maxValue}
                  data={data}
                  isAnimated
                  width={width - 140}
                  barWidth={width * 0.25}
                  yAxisTextStyle={{ color: colors.text }}
                  xAxisLabelTextStyle={{ color: colors.text }}
                  renderTooltip={(item: any, index: any) => {
                     return (
                        <View
                           style={{
                              alignItems: 'center',
                              justifyContent: 'center',
                              width: width * 0.25
                           }}>
                           <Text>{item.value}</Text>
                        </View>
                     );
                  }}
               />
         }

      </View>
   )
}