import React from 'react'
import { 
  View, 
  Text,
  FlatList,
  Image,
  StyleSheet
} from 'react-native';
import { 
  returnIcon,
  returnStatus
} from '../../../utils/IQAIRhelper';
import { useNavigation } from '@react-navigation/native';
import CustomHeader from '../../../components/header.js';
import CustomSafeArea from '../../../components/safeArea.component';
import Elements from '../../../components/elements.js';
import Theme from '../../../components/theme.style.js';

const status = [
  {
    id: 0,
    title: `0 - 50 ${returnStatus(0).title}`,
    body: returnStatus(0).body,
    color: Theme.colors.iqair[0].main,
  },
  {
    id: 1,
    title: `51 - 100 ${returnStatus(1).title}`,
    body: returnStatus(1).body,
    color: Theme.colors.iqair[1].main,
  },
  {
    id: 2,
    title: `101 - 150 ${returnStatus(2).title}`,
    body: returnStatus(2).body,
    color: Theme.colors.iqair[2].main,
  },
  {
    id: 3,
    title: `151 - 200 ${returnStatus(3).title}`,
    body: returnStatus(3).body,
    color: Theme.colors.iqair[3].main,
  },
  {
    id: 4,
    title: `201 - 300 ${returnStatus(4).title}`,
    body: returnStatus(4).body,
    color: Theme.colors.iqair[4].main,
  },
  {
    id: 5,
    title: `301 - 500 ${returnStatus(5).title}`,
    body: returnStatus(5).body,
    color: Theme.colors.iqair[5].main,
  }
]

const Guide = () => {
  const navigation = useNavigation();

  const renderItem = ({item, index}) => {
    return (
      <Elements.shadowView>
        <View style={styles.container(index)}>
          <View style={styles.imageContainer(item)}>
            <Image source={returnIcon(item.id)} style={styles.image}/>
          </View>
          <View style={styles.infoContainer}>
            <Text style={styles.titleText(item)}>{item.title}</Text>
            <Text style={styles.bodyText}>{item.body}</Text>
          </View>
        </View>
      </Elements.shadowView>
    )
  }
  
  return (
    <CustomSafeArea>
      <CustomHeader back={true} onBackPress={() => navigation.goBack()} title="IQAIR Guide" menu={false} navigation={navigation} />

      <FlatList 
        data={status}
        renderItem={renderItem}
      />
    </CustomSafeArea>
  )
}

export default Guide

const styles = StyleSheet.create({
  container: (index) => {
    return {
      flex: 1, 
      flexDirection: 'row', 
      marginHorizontal: 18, 
      marginTop: index === 0 ? 25 : 15, 
      marginBottom: index === (status.length - 1) ? 25 : 0, 
      backgroundColor: 'white',
      elevation: 5
    }
  },
  imageContainer: (item) => {
    return {
      backgroundColor: item.color, 
      paddingVertical: 12, 
      paddingHorizontal: 15, 
      justifyContent: 'center'
    }
  },
  image: {
    height: 65, 
    width: 65, 
    resizeMode: 'contain'
  },
  infoContainer: {
    flex: 1, 
    backgroundColor: 'white',
    paddingHorizontal: 10, 
    paddingTop: 4, 
    paddingBottom: 15
  },
  titleText: (item) => {
    return {
      color: item.color, 
      fontSize: 15, 
      fontWeight: 'bold'
    }
  },
  bodyText: {
    marginTop: 4, 
    color: Theme.colors.searchText, 
    fontSize: 13
  }
})