{"size": 1911, "ext": "js", "max_stars_repo_path": "src/modules/categories/components/SubCategoryListItem.js", "max_stars_repo_name": "Integreat/integreat-react-native-app", "max_stars_repo_stars_event_min_datetime": "2018-11-27T18:04:36.000Z", "max_stars_repo_stars_event_max_datetime": "2021-10-30T13:00:18.000Z", "max_issues_repo_path": "src/modules/categories/components/SubCategoryListItem.js", "max_issues_repo_name": "Integreat/integreat-react-native-app", "max_issues_repo_issues_event_min_datetime": "2018-11-06T15:46:06.000Z", "max_issues_repo_issues_event_max_datetime": "2020-09-24T17:38:44.000Z", "max_forks_repo_path": "src/modules/categories/components/SubCategoryListItem.js", "max_forks_repo_name": "Integreat/integreat-react-native-app", "max_forks_repo_forks_event_min_datetime": "2018-11-06T15:22:03.000Z", "max_forks_repo_forks_event_max_datetime": "2020-09-26T13:56:51.000Z"}
{"max_stars_count": 11, "max_issues_count": 138, "max_forks_count": 8, "avg_line_length": 31.85, "max_line_length": 106, "alphanum_fraction": 0.713762428}
// @flow

import * as React from 'react'

import type { ThemeType } from '../../theme/constants'
import styled from 'styled-components/native'
import { type StyledComponent } from 'styled-components'
import { contentDirection } from '../../i18n/contentDirection'

const SubCategoryTitleContainer = styled.View`
  flex: 1;
  align-self: center;
  padding: 8px 0;
  border-bottom-width: 1px;
  border-bottom-color: ${props => props.theme.colors.themeColor};
  flex-direction: ${props => contentDirection(props.language)};
`

type FlexStyledLinkPropsType = {|
  language: string, children: React.Node, theme: ThemeType, onPress: () => void, underlayColor: string
|}

const FlexStyledLink: StyledComponent<FlexStyledLinkPropsType, ThemeType, *> = styled.TouchableHighlight`
  display: flex;
  flex-direction: ${props => contentDirection(props.language)};
  margin: 0 20px 0 95px;
`

const SubCategoryTitle = styled.Text`
  color: ${props => props.theme.colors.textColor};
  font-family: ${props => props.theme.fonts.decorativeFontRegular};
`

type PropsType = {
  subCategory: { title: string, thumbnail: string, path: string },
  theme: ThemeType,
  onItemPress: (tile: { title: string, thumbnail: string, path: string }) => void,
  language: string
}

class SubCategoryListItem extends React.PureComponent<PropsType> {
  onSubCategoryPress = () => {
    this.props.onItemPress(this.props.subCategory)
  }

  render () {
    const { language, subCategory, theme } = this.props
    return (
      <FlexStyledLink onPress={this.onSubCategoryPress} underlayColor={theme.colors.backgroundAccentColor}
                      language={language} theme={theme}>
        <SubCategoryTitleContainer language={language} theme={theme}>
          <SubCategoryTitle theme={theme}>{subCategory.title}</SubCategoryTitle>
        </SubCategoryTitleContainer>
      </FlexStyledLink>
    )
  }
}

export default SubCategoryListItem
