import {
  View,
  Text,
  ScrollView,
  Dimensions,
  Image,
  TouchableOpacity,
} from 'react-native';
import React, {useState, useEffect} from 'react';
import {useTranslation} from 'react-i18next';
import {styles} from './style';
import {ResultCard} from '@components/card/ResultCard';

import {RESULTAT_RECHERCHE} from '@helpers/fakedata/Data';
import {CustomButton} from '@components/buttons/CustomButton';
import Rating from '@assets/images/home/rating.svg';
import Time from '@assets/images/home/time.svg';
import Date from '@assets/images/home/date.svg';
import Position from '@assets/images/home/position.svg';
import {colors} from '@constants/colors';
import {FONTS} from '@constants/index';

const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
const screenHeightLarge = 780;
const screenHeight = 600;

export const ResultRecherche = () => {
  const {t} = useTranslation();
  const [isLoading, setLoading] = useState(false);
  const [isSelected, setisSelected] = useState(false);
  const Separator = () => {
    return <View style={styles.sectionSeparator} />;
  };
  const handleSelect = item => {
    console.log('item', item);
    // setisSelected(true);
  };
  return (
    <View style={{flex: 1}}>
      <ScrollView
        contentInsetAdjustmentBehavior={'always'}
        keyboardShouldPersistTaps={'always'}
        showsVerticalScrollIndicator={false}
        showsHorizontalScrollIndicator={false}
        style={{
          //   top: 50,
          height: height >= screenHeight ? 0.4 * height : 0.5 * height,
          backgroundColor: 'transparent',
          paddingBottom: Platform.OS === 'ios' ? (height * 10) / 100 : 20,
        }}>
        {RESULTAT_RECHERCHE.map(item => (
          <TouchableOpacity
            onPress={() => handleSelect(item)}
            key={item.id}
            style={{
              
              paddingHorizontal: 20,
              //   flex: 1,
            }}>
            <View style={{flexDirection: 'row', marginVertical: 5}}>
              <Image
                source={require('@assets/images/personn.jpg')}
                style={{
                  height: 82,
                  width: 82,
                  borderRadius: 40,
                  shadowColor: 'black',
                  top: 15,
                }}
              />
              <View style={{marginHorizontal: 10}}>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    width: '74%',
                    paddingTop: 10,
                  }}>
                  <Text
                    style={{
                      marginVertical: 2,
                      color: colors.secondary,
                      fontSize: 14,
                      fontFamily: FONTS.MEDIUM,
                    }}>
                    {item.name}
                  </Text>
                  <Text
                    style={{
                      marginVertical: 2,
                      color: colors.secondary,
                      fontSize: 14,
                      fontFamily: FONTS.MEDIUM,
                    }}>
                    TND {item.prix}
                  </Text>
                </View>
                <Text
                  style={{
                    marginVertical: 2,
                    color: colors.border,
                    fontSize: 13,
                    fontFamily: FONTS.REGULAR,
                  }}>
                  {item.metier}
                </Text>
                <View
                  style={{
                    flexDirection: 'row',
                    paddingTop: 4,
                    textAlign: 'center',
                  }}>
                  <View style={{flexDirection: 'row', textAlign: 'center'}}>
                    <Date style={{alignSelf: 'center'}} />
                    <Text
                      style={{
                        marginVertical: 2,
                        color: colors.secondary,
                        fontSize: 14,
                        fontFamily: FONTS.REGULAR,
                        left: 1,
                      }}>
                      {item.dateDebut}
                    </Text>
                  </View>
                  <View style={{flexDirection: 'row', alignSelf: 'center'}}>
                    <Text
                      style={{
                        color: colors.secondary,
                        fontSize: 14,
                        fontFamily: FONTS.REGULAR,
                        alignSelf: 'center',
                      }}>
                      {'  à  '}
                    </Text>
                    <Text
                      style={{
                        marginVertical: 2,
                        color: colors.secondary,
                        fontSize: 14,
                        fontFamily: FONTS.REGULAR,
                      }}>
                      {item.dateFin}
                    </Text>
                  </View>
                  <View
                    style={{
                      flexDirection: 'row',
                      textAlign: 'center',
                      left: 40,
                    }}>
                    <Time style={{alignSelf: 'center'}} />
                    <Text
                      style={{
                        marginVertical: 2,
                        color: colors.secondary,
                        fontSize: 14,
                        fontFamily: FONTS.REGULAR,
                        left: 3,
                      }}>
                      {item.disponibilite}
                    </Text>
                  </View>
                </View>
                <Rating
                  style={{
                    top: 5,
                    marginVertical: 2,
                    left: -2,
                  }}
                />
                <View style={{flexDirection: 'row', textAlign: 'center'}}>
                  <Position style={{alignSelf: 'center'}} />
                  <Text
                    style={{
                      marginVertical: 8,
                      color: colors.secondary,
                      fontSize: 14,
                      fontFamily: FONTS.REGULAR,
                      left: 4,
                    }}>
                    {item.distance} Km
                  </Text>
                </View>
              </View>

              {/* <View>
                
                <Text style={styles.title}>{item.metier}</Text>
                <View style={{flexDirection: 'row', paddingTop: 10}}>
                  <Text style={{marginVertical: 2}}>{item.dateDebut}</Text>
                  <Text style={{marginVertical: 2}}>{item.dateFin}</Text>
                </View>
                <Rating
                  style={{
                    top: 5,
                    //   justifyContent: 'center',
                    //   alignItems: 'center',
                  }}
                />
                <Text style={{marginVertical: 2}}>{item.distance}</Text>
              </View> */}
            </View>
            <Separator />
          </TouchableOpacity>
        ))}
      </ScrollView>
      <View
        style={{
          alignItems: 'center',
          backgroundColor: 'white',
          marginTop: 10,
        }}>
        <CustomButton
          isBordered
          borderWidth={1}
          isDisabled={false}
          isLoading={isLoading}
          submitting={true}
          onPress={() => console.log('mriguel')}
          label={'Réserver'}
          width={width * 0.9}
        />
      </View>
    </View>
  );
};
i want to change the background of the item slelected