// List item component

// Props:
// title: string
// subTitle: string
// image: object
// IconComponent: object
// onPress: function

import React from 'react'
import { StyleSheet, View, TouchableHighlight } from 'react-native'

import Text from './Text'
import { colors, spacing } from '../theme'
import Icon from './Icon'

const ListItem = ({
  title,
  subTitle,
  IconComponent,
  onPress,
  titleStyle,
  subTitleStyle,
  m,
  mx,
  my,
  mt,
  mb,
  ml,
  mr,
  p = spacing.s_2,
  px,
  py,
  pt,
  pb,
  pl,
  pr,
  align = 'left',
  backgroundColor = 'transparent',
  RightComponent,
  footerLabel,
  footerLabelStyle,
  showChevron = true,
}) => {
  const marginPaddingStyles = {
    margin: m,
    marginHorizontal: mx,
    marginVertical: my,
    marginTop: mt,
    marginBottom: mb,
    marginLeft: ml,
    marginRight: mr,
    padding: p,
    paddingHorizontal: px,
    paddingVertical: py,
    paddingTop: pt,
    paddingBottom: pb,
    paddingLeft: pl,
    paddingRight: pr,
  }

  const styles = StyleSheet.create({
    container: {
      backgroundColor: colors.n_100,
      // width: '100%',
      padding: spacing.s_3,
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
    },
    detailsContainer: {
      marginLeft: spacing.s_3,
      width: '100%',
      // backgroundColor: 'red',
      // alignItems: 'center',
      // justifyContent: 'center',
    },
    title: {
      width: '100%',
      fontWeight: 'bold',
    },
    subTitle: {
      color: colors.n_700,
      width: '100%',
    },
    leftContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      width: showChevron || RightComponent ? '80%' : '90%',
      // backgroundColor: 'red',
    },
    rightContainer: {
      width: showChevron || RightComponent ? '20%' : '0%',

      // backgroundColor: 'blue',
    },
  })

  return (
    <TouchableHighlight underlayColor='#f8f4f4' onPress={onPress}>
      <>
        <View
          style={[
            styles.container,
            marginPaddingStyles,
            IconComponent && { alignItems: 'center' },
            backgroundColor && { backgroundColor },
          ]}
        >
          {/* Left  */}
          <View style={styles.leftContainer}>
            {IconComponent}
            {/* Center */}
            <View style={[styles.detailsContainer]}>
              <Text
                style={[
                  styles.title,
                  titleStyle,
                  align && {
                    textAlign: align,
                  },
                ]}
              >
                {title}
              </Text>
              {subTitle && (
                <Text style={[styles.subTitle, subTitleStyle]}>{subTitle}</Text>
              )}
            </View>
          </View>
          {/* Right */}

          <View style={styles.rightContainer}>
            {showChevron && !RightComponent && (
              <Icon
                align='center'
                name='chevron-right'
                size={40}
                color={colors.n_500}
              />
            )}
            {RightComponent}
          </View>
        </View>
        <Text
          size={12}
          weight='500'
          mt={-8}
          align='right'
          style={[{ fontSize: 14 }, footerLabelStyle]}
        >
          {footerLabel}
        </Text>
      </>
    </TouchableHighlight>
  )
}

export default ListItem