import Styles from "@/constants/Styles";
import { Dimensions, View } from "react-native";
import { BarChart } from "react-native-gifted-charts";
import Text from "../Text";

export default function ReportChartDocument({ data }: { data: { label: string; value: number; }[] }) {
   const maxValue = Math.max(...data.map(i => i.value))
   const barData = [
      { value: 23, label: 'Gambar', },
      { value: 12, label: 'Dokumen' },
   ];
   const width = Dimensions.get("window").width;

   return (
      <View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15]}>
         <Text style={[Styles.textSubtitle, Styles.mv15]}>JUMLAH DOKUMEN</Text>
         <BarChart
            showFractionalValues={false}
            showYAxisIndices
            noOfSections={maxValue < 5 ? 2 : 4}
            maxValue={maxValue}
            data={data}
            isAnimated
            width={width - 140}
            barWidth={width * 0.25}
            frontColor="#fac858"
            renderTooltip={(item: any, index: any) => {
               return (
                  <View
                     style={{
                        alignItems: 'center',
                        justifyContent: 'center',
                        width: width * 0.25
                     }}>
                     <Text>{item.value}</Text>
                  </View>
               );
            }}
         />
      </View>
   )
}