import React, {useState} from 'react';

import {View, Text, TouchableWithoutFeedback} from 'react-native';

import {

  heightPercentageToDP as hp,

  widthPercentageToDP as wp,

} from 'react-native-responsive-screen';

import {LineChart} from 'react-native-chart-kit';

const Services = () => {

  const [selectedData, setSelectedData] = useState(null);

  const hideSelectedData = () => {

    setTimeout(() => {

      setSelectedData(null);

    }, 3000);

  };

  const APIdata = {

    output: {

      gasolineAndGasoil: [

        {

          date: '19-Dec-2023',

          gasOline: 762.75,

          gasOil: 766.62,

        },

        {

          date: '20-Dec-2023',

          gasOline: 767.75,

          gasOil: 780.15,

        },

        {

          date: '21-Dec-2023',

          gasOline: 775.25,

          gasOil: 768.44,

        },

        {

          date: '22-Dec-2023',

          gasOline: 784,

          gasOil: 768.82,

        },

        {

          date: '27-Dec-2023',

          gasOline: 796,

          gasOil: 758.6,

        },

        {

          date: '28-Dec-2023',

          gasOline: 784.5,

          gasOil: 751.41,

        },

        {

          date: '29-Dec-2023',

          gasOline: 764.25,

          gasOil: 732.31,

        },

        {

          date: '02-Jan-2024',

          gasOline: 757.88,

          gasOil: 741.62,

        },

        {

          date: '03-Jan-2024',

          gasOline: 777.88,

          gasOil: 739.38,

        },

        {

          date: '04-Jan-2024',

          gasOline: 763.38,

          gasOil: 743.81,

        },

        {

          date: '05-Jan-2024',

          gasOline: 769,

          gasOil: 746.7,

        },

        {

          date: '08-Jan-2024',

          gasOline: 733.38,

          gasOil: 738.95,

        },

        {

          date: '09-Jan-2024',

          gasOline: 751,

          gasOil: 745.74,

        },

        {

          date: '10-Jan-2024',

          gasOline: 747.88,

          gasOil: 752.88,

        },

      ],

      changeGasoline: '-0.415',

      changeGasoil: '0.957',

    },

    errors: [

      {

        status: 'Success',

        code: '0',

        detail: '128',

      },

    ],

  };

  const originalLabels = APIdata.output.gasolineAndGasoil.map(

    entry => entry.date,

  );

  const stepSize = Math.ceil(originalLabels.length / 4);

  const labels = originalLabels.filter((_, index) => index % stepSize === 0);

  const stepSizeNew = 1;

  const labelsNew = originalLabels.filter(

    (_, index) => index % stepSizeNew === 0,

  );

  const data = {

    labels: labels,

    datasets: [

      {

        data: APIdata.output.gasolineAndGasoil.map(entry => entry.gasOline),

        color: (opacity = 1) => `rgba(0, 128, 0, ${opacity})`,

        strokeWidth: 2,

      },

      {

        data: APIdata.output.gasolineAndGasoil.map(entry => entry.gasOil),

        color: (opacity = 1) => `rgba(2, 005, 0, ${opacity})`,

        strokeWidth: 2,

      },

    ],

  };

  const handleDataPointClick = ({value, dataset}) => {

    const index = dataset.data.indexOf(value);

    const selectedDate = labelsNew[index];

    const selectedValue = value.toFixed(2);

    setSelectedData({date: selectedDate, value: selectedValue});

    hideSelectedData();

  };

  const pointerConfig = {

    pointerColor: 'red',

  };

  return (

    <View>

      <View style={{alignSelf: 'center', alignItems: 'center'}}>

        <Text>Gasoline and GasOil</Text>

        <Text>Showing report for the last 32 days </Text>

      </View>

      <View style={{alignItems: 'center'}}>

        <LineChart

          data={data}

          width={wp('95%')}

          height={hp('25%')}

          chartConfig={{

            backgroundGradientFrom: '#fff',

            backgroundGradientTo: 'black',

            color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,

            labelColor: () => 'black',

          }}

          bezier

          onDataPointClick={handleDataPointClick}

          style={{

            marginVertical: hp('1%'),

            borderRadius: hp('0.5%'),

          }}

          pointerConfig={pointerConfig}

        />

      </View>

      {/* Popup card when data is selected */}

      {selectedData && (

        <TouchableWithoutFeedback onPress={() => setSelectedData(null)}>

          <View

            style={{

              position: 'absolute',

              top: hp('5.5%'),

              right: wp('2.9%'),

              backgroundColor: 'white',

              padding: hp('1%'),

              borderRadius: hp('0.5%'),

            }}>

            <Text style={{fontSize: hp('1%')}}>Date: {selectedData.date}</Text>

            <Text style={{fontSize: hp('1%')}}>

              Value: {selectedData.value}

            </Text>

          </View>

        </TouchableWithoutFeedback>

      )}

      <View style={{alignSelf: 'center', alignItems: 'center'}}>

        <Text style={{color: 'green'}}>Gasoline is Green </Text>

        <Text style={{color: 'black'}}>GasOil is Black</Text>

      </View>

    </View>

  );

};

export default Services;