import {Text, TouchableOpacity, View} from "react-native";
import {CurveType, LineChart} from "react-native-gifted-charts";
import React, {useRef, useState} from "react";

export default function ActivitiesComponent() {
    const ref = useRef(null)
    const [dateSelected, setDateSelected] = useState('1d');
    const [lineData, setLineData] = useState([
        {value: 4},
        {value: 14},
        {value: 8},
        {value: 38},
        {value: 36},
        {value: 28},
    ]);

    const months = ['1d','1w','1m','1y','All']
    const changeMonthSelected = (ind: number) => {
        const selectedMonth = months[ind];
        setDateSelected(selectedMonth);

        // Update lineData based on the selected month
        let newData: React.SetStateAction<{ value: number; }[]>;
        switch (selectedMonth) {
            case '1d':
                newData = [
                    {value: 4},
                    {value: 14},
                    {value: 8},
                    {value: 38},
                    {value: 36},
                    {value: 28},
                ];
                break;
            case '1w':
                newData = [
                    {value: 8},
                    {value: 14},
                    {value: 8},
                    {value: 38},
                    {value: 14},
                    {value: 28},
                    {value: 4},
                ];
                break;
            case '1m':
                newData = [
                    {value: 10},
                    {value: 20},
                    {value: 30},
                    {value: 40},
                    {value: 50},
                    {value: 60},
                ];
                break;
            case '1y':
                newData = [
                    {value: 15},
                    {value: 25},
                    {value: 35},
                    {value: 45},
                    {value: 55},
                    {value: 65},
                ];
                break;
            case 'All':
                newData = [
                    {value: 5},
                    {value: 15},
                    {value: 25},
                    {value: 35},
                    {value: 45},
                    {value: 55},
                ];
                break;
            default:
                newData = [];
        }
        setLineData(newData);
    };

    return (
        <View className="bg-gray-200 rounded-2xl p-1 h-full">
            <View className=" m-2 flex-row justify-center  rounded-2xl bg-white">
                {months.map((item, index) => {
                    return (
                        <TouchableOpacity
                            key={index}
                            className={`w-16 h-10 flex items-center justify-center rounded-xl ${
                                dateSelected === item
                                    ? "bg-orange-500 border-2 border-orange-300"
                                    : "bg-transparent  "
                            }`}
                            onPress={() => changeMonthSelected(index)}>
                            <Text className="font-extrabold">{months[index]}</Text>
                        </TouchableOpacity>
                    );
                })}
            </View>
            <LineChart
                scrollRef={ref}
                data={lineData}
                areaChart
                curved
                initialSpacing={0}
                rotateLabel
                isAnimated={true}
                startFillColor="orange"
                curveType={CurveType.QUADRATIC}
            />
        </View>
    );
}