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: {

     brentGraph: [

       {

         date: '19-Dec-2023',

         iceBrentCrudeOil: 79.23,

         differenceValue: null,

       },

       {

         date: '20-Dec-2023',

         iceBrentCrudeOil: 79.7,

         differenceValue: 0.47,

       },

       {

         date: '21-Dec-2023',

         iceBrentCrudeOil: 79.39,

         differenceValue: -0.31,

       },

       {

         date: '22-Dec-2023',

         iceBrentCrudeOil: 79.07,

         differenceValue: -0.32,

       },

       {

         date: '26-Dec-2023',

         iceBrentCrudeOil: 81.07,

         differenceValue: 2,

       },

       {

         date: '27-Dec-2023',

         iceBrentCrudeOil: 79.65,

         differenceValue: -1.42,

       },

       {

         date: '28-Dec-2023',

         iceBrentCrudeOil: 78.39,

         differenceValue: -1.26,

       },

       {

         date: '29-Dec-2023',

         iceBrentCrudeOil: 80.04,

         differenceValue: -1.35,

       },

       {

         date: '02-Jan-2024',

         iceBrentCrudeOil: 85.89,

         differenceValue: -1.15,

       },

       {

         date: '03-Jan-2024',

         iceBrentCrudeOil: 78.25,

         differenceValue: 2.36,

       },

       {

         date: '04-Jan-2024',

         iceBrentCrudeOil: 77.59,

         differenceValue: -0.66,

       },

       {

         date: '05-Jan-2024',

         iceBrentCrudeOil: 78.76,

         differenceValue: 1.17,

       },

       {

         date: '08-Jan-2024',

         iceBrentCrudeOil: 76.12,

         differenceValue: -2.64,

       },

       {

         date: '09-Jan-2024',

         iceBrentCrudeOil: 77.59,

         differenceValue: 1.47,

       },

       {

         date: '10-Jan-2024',

         iceBrentCrudeOil: 76.8,

         differenceValue: -0.79,

       },

       {

         date: '11-Jan-2024',

         iceBrentCrudeOil: 78.48,

         differenceValue: 1.68,

       },

       {

         date: '12-Jan-2024',

         iceBrentCrudeOil: 78.53,

         differenceValue: 0.05,

       },

       {

         date: '15-Jan-2024',

         iceBrentCrudeOil: 78.16,

         differenceValue: -0.37,

       },

       {

         date: '16-Jan-2024',

         iceBrentCrudeOil: 78.73,

         differenceValue: 0.57,

       },

       {

         date: '17-Jan-2024',

         iceBrentCrudeOil: 77.24,

         differenceValue: -1.49,

       },

     ],

     minIceBrentCrudeOil: '75.89',

     maxIceBrentCrudeOil: '81.07',

     changeBrentOil: '-1.018',

   },

   errors: [

     {

       status: 'Success',

       code: '0',

       detail: '129',

     },

   ],

 };


 const originalLabels = APIdata.output.brentGraph.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.brentGraph.map(entry => entry.iceBrentCrudeOil),

     },

   ],

 };


 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();

 };


 return (

   <View>

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

       <Text>Gas Oil</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: '#fb8c00',

           backgroundGradientTo: '#ffa726',

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

           labelColor: () => `black`,

         }}

         bezier

         onDataPointClick={handleDataPointClick}

         style={{

           marginVertical: hp('1%'),

           borderRadius: hp('0.5%'),

         }}

       />

     </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>

 );

};


export default Services;