import React, { useState } from "react";
import { Props } from "./Analytics.types";
import { styles } from "./Analytics.styles";
import { Dimensions, Text, View } from "react-native";
import { LineChart } from "react-native-chart-kit";

export default function Analytics(Props: Props) {
  return (
    <View>
      <Text>Bezier Line Chart</Text>
      {Props.chartType === "LineChart" && (
        <View
          style={{
            paddingVertical: 20,
            backgroundColor: "black",
            borderRadius: 16,
          }}
        >
          <LineChart
            data={{
              labels: Props.lineChartData?.label || [],
              datasets: [
                {
                  data: Props.lineChartData?.dataSet || [],
                  color: () => "blue",
                },
              ],
            }}
            // width={Dimensions.get("window").width} // from react-native
            width={380}
            height={420}
            yAxisLabel="$"
            yAxisSuffix="k"
            yAxisInterval={1} // optional, defaults to 1
            chartConfig={{
              backgroundGradientFrom: "black",
              backgroundGradientTo: "black",

              decimalPlaces: 2, // optional, defaults to 2dp
              color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
              labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
              style: {
                backgroundColor: "red",
              },
              propsForDots: {
                r: "6",
                strokeWidth: "2",
              },
            }}
            bezier={false}
            style={{ borderWidth: 1, paddingBottom: 0, marginBottom: 0 }}
          />
        </View>
      )}
    </View>
  );
}