import React, { useState } from 'react';
import { View, Text, Dimensions, Pressable, StyleSheet, ScrollView } from "react-native";
import { LineChart } from 'react-native-chart-kit';

const screenWidth = Dimensions.get("window").width;

const Grafico = () => {
  const [timeFrame, setTimeFrame] = useState("1D");

  const data = {
    labels: ["Lun", "Mar", "Mer", "Gio", "Ven", "Sab", "Dom"],
    datasets: [
      {
        data: [20, 45, 28, 80, 70, 43, 100, 100],
        color: (opacity = 1) => `rgba(134, 65, 244, ${opacity})`, 
        strokeWidth: 2
      }
    ],
    legend: ["Money"]
  };

  const handleTimeFrameChange = (newTimeFrame: React.SetStateAction<string>) => {
    setTimeFrame(newTimeFrame);
  };

  return (
    <View style={styles.container}>
      {/* Contenitore con bordo per il grafico */}
      <View style={styles.chartContainer}>
        <LineChart
          data={data}
          width={screenWidth - 40}
          height={180}
          verticalLabelRotation={0}
          chartConfig={chartConfig}
          bezier
        />
      </View>

      {/* ScrollView per bottoni */}
      <ScrollView horizontal contentContainerStyle={styles.scrollContainer}>
        <View style={styles.buttonRow}>
          <Pressable onPress={() => handleTimeFrameChange("1D")}>
            <Text style={[styles.buttonText, timeFrame === "1D" && styles.activeButton]}>1D</Text>
          </Pressable>
          <Pressable onPress={() => handleTimeFrameChange("1W")}>
            <Text style={[styles.buttonText, timeFrame === "1W" && styles.activeButton]}>1W</Text>
          </Pressable>
          <Pressable onPress={() => handleTimeFrameChange("1M")}>
            <Text style={[styles.buttonText, timeFrame === "1M" && styles.activeButton]}>1M</Text>
          </Pressable>
          <Pressable onPress={() => handleTimeFrameChange("July")}>
            <Text style={[styles.buttonText, timeFrame === "July" && styles.activeButton]}>July</Text>
          </Pressable>
          <Pressable onPress={() => handleTimeFrameChange("June")}>
            <Text style={[styles.buttonText, timeFrame === "June" && styles.activeButton]}>June</Text>
          </Pressable>
          <Pressable onPress={() => handleTimeFrameChange("May")}>
            <Text style={[styles.buttonText, timeFrame === "May" && styles.activeButton]}>May</Text>
          </Pressable>
          <Pressable onPress={() => handleTimeFrameChange("All")}>
            <Text style={[styles.buttonText, timeFrame === "All" && styles.activeButton]}>All</Text>
          </Pressable>
        </View>
      </ScrollView>
    </View>
  );
};

const chartConfig = {
  color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
  strokeWidth: 1,
  barPercentage: 0.5,
  useShadowColorFromDataset: false
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  chartContainer: {
    borderWidth: 2,
    borderColor: 'black',
    borderRadius: 10,
    padding: 10,
    marginBottom: 20,
    alignItems: 'center',
  },
  scrollContainer: {
    paddingVertical: 10,
    alignItems: 'center',
  },
  buttonRow: {
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  buttonText: {
    fontSize: 16,
    color: 'white',  // Cambia il colore del testo per contrasto
    backgroundColor: '#1a1a1a',  // Aggiungi un background color per i bottoni
    padding: 10,  // Rendi il bottone più compatto
    marginHorizontal: 5,  // Spaziatura laterale più piccola
    borderRadius: 5,  // Arrotonda i bordi
  },
  activeButton: {
    color: 'purple',
    fontWeight: 'bold',
    backgroundColor: 'lightgray',  // Cambia il colore di sfondo per il bottone attivo
  }
});

export default Grafico;