import  { View,Text ,StyleSheet,ScrollView} from 'react-native';
import { useLocalSearchParams } from 'expo-router';
import exercises from '../../assets/data/exercises.json';
import { Stack } from 'expo-router';
import { useState } from 'react';


export default function ExerciseDeatilsScreen(){

   const params = useLocalSearchParams();
   const [isInE, setInE]=useState(false);
   const exercise =  exercises.find((item)=> item.name === params.name);
//yeskina::local.io+1000::335f2290a1cd26b70d46f7af5f0e1ed2ac4eb7fde0baa68d5b1a0bd1df4a4173
   if (!exercise){
    return <Text>Too Bad.</Text>; 
   }
   
   return (
        <ScrollView style={{ gap: 5 }}>
          <Stack.Screen options={{title:'hhhhh'}}  />
            <View style={styles.panel}>
                <Text style={styles.exerciseName}>{exercise.name}</Text>
                <Text style={styles.exerciseSubtitle}>
                    <Text style={styles.subValue}>{exercise.muscle}</Text> |{' '}
                    <Text style={styles.subValue}>{exercise.equipment}</Text>
                </Text>
            </View>
            <View style={styles.panel}>
              <Text
                style={styles.instructions} 
                numberOfLines={isInE ? 0:3}
                >
                {exercise.instructions} 
              </Text>
             <Text 
             onPress={()=>{
              setInE(!isInE)
             }}
             style={styles.seeMore}>{isInE?'See less':'See more'}</Text>
            </View>

        </ScrollView>)
   
}

const styles = StyleSheet.create({
    container: {
      padding: 10,
    },
    panel: {
      backgroundColor: 'white',
      padding: 10,
      borderRadius: 5,
    },
    exerciseName: {
      fontSize: 20,
      fontWeight: '500',
    },
    exerciseSubtitle: {
      color: 'dimgray',
    },
    subValue: {
      textTransform: 'capitalize',
    },
    instructions: {
      fontSize: 16,
      lineHeight: 22,
    },
    seeMore: {
      alignSelf: 'center',
      padding: 5,
      fontWeight: '600',
      color: 'gray',
    },
  });