-- CODE language-jsx --
import React from 'react';
import Images from '../config/Images';
import { Button, Divider, Icon, ScreenContainer, Touchable, withTheme } from '@draftbit/ui';
import { FlatList, Image, KeyboardAvoidingView, StyleSheet, Text, View } from 'react-native';
import { Fetch } from 'react-request';
   const REPLACE_SCREEN_NAME = props => {
     const { theme } = props
     return (
     <ScreenContainer  scrollable={true} hasSafeArea={true}>
     <KeyboardAvoidingView  style={styles.KeyboardAvoidingView_3h}keyboardVerticalOffset={44} behavior=""position"" enabled={true}>
     <View  style={styles.Viewuv}>
       <Image  style={styles.Imagej8}source={Images.ProfilePlaceholder} resizeMode=""cover"" />
     <Text  style={StyleSheet.flatten([styles.Text_35, theme.typography.headline4, { color: theme.colors.strong }])}>
       Kickbit - Authorized Nike Retailer
     </Text>
     <Text  style={StyleSheet.flatten([styles.TextiD, theme.typography.subtitle1, { color: theme.colors.medium }])}>
       Store Description
     </Text>
     <Touchable  style={styles.TouchableF3}>
     <View  style={styles.Viewia}importantForAccessibility=""auto"" accessible={true} pointerEvents=""auto"" hitSlop={{}}>
       <Icon  style={styles.IconyE}name=""MaterialCommunityIcons/map-marker"" color={theme.colors.primary} size={20} />
     <Text  style={StyleSheet.flatten([theme.typography.subtitle2, { color: theme.colors.primary }])}allowFontScaling={true} ellipsizeMode=""tail"" accessible={true} textBreakStrategy=""highQuality"">
       Location
     </Text>
     </View>
     </Touchable>
     <Touchable  style={styles.TouchableDF}>
     <View  style={styles.ViewbW}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
       <Icon  style={styles.Iconj3}size={20} name=""MaterialCommunityIcons/link-variant"" color={theme.colors.primary} />
     <Text  style={StyleSheet.flatten([theme.typography.subtitle2, { color: theme.colors.primary }])}textBreakStrategy=""highQuality"" accessible={true} allowFontScaling={true} ellipsizeMode=""tail"">
       Website
     </Text>
     </View>
     </Touchable>
     </View>
     <View  style={styles.View_7R}accessible={true} hitSlop={{}} pointerEvents=""auto"" importantForAccessibility=""auto"">
     <View  style={styles.ViewXn}hitSlop={{}} pointerEvents=""auto"" importantForAccessibility=""auto"" accessible={true}>
     <Text  style={StyleSheet.flatten([theme.typography.headline5, { color: theme.colors.strong }])}textBreakStrategy=""highQuality"" accessible={true} allowFontScaling={true} ellipsizeMode=""tail"">
       Products
     </Text>
     <Touchable  >
     <Text  style={StyleSheet.flatten([theme.typography.headline5, { color: theme.colors.primary }])}accessible={true} allowFontScaling={true} textBreakStrategy=""highQuality"" ellipsizeMode=""tail"">
       See All
     </Text>
     </Touchable>
     </View>
   <Fetch
   url={`https://example-data.draftbit.com/products?brand=${encodeURIComponent(""Nike"")}&_limit=3&_sort=average_product_rating&_order=desc`}
   headers={{""Accept"": ""application/json"",""Content-Type"": ""application/json""}}
 >
 {({ loading, error, data, refetch }) => {
   if (loading) {
     return (null)
   }
   if (error) {
     return (null)
   }
   if (!data) {
     return (null)
   }
   return (<FlatList renderItem={({ item }) =>
     <Touchable  >
     <View  style={styles.ViewAU}importantForAccessibility=""auto"" hitSlop={{}} accessible={true} pointerEvents=""auto"">
     <View  style={styles.ViewcK}accessible={true} importantForAccessibility=""auto"" hitSlop={{}} pointerEvents=""auto"">
     <View  style={styles.ViewIn}accessible={true} hitSlop={{}} importantForAccessibility=""auto"" pointerEvents=""auto"">
       <Image  style={styles.ImageLH}resizeMode=""contain"" source={{ uri: item[""image_url""] }} />
     </View>
     <View  style={styles.Viewul}accessible={true} importantForAccessibility=""auto"" hitSlop={{}} pointerEvents=""auto"">
     <Text  style={StyleSheet.flatten([theme.typography.headline6, { color: theme.colors.strong }])}accessible={true} allowFontScaling={true} textBreakStrategy=""highQuality"" ellipsizeMode=""tail"">
       {item && item[""name""]}
     </Text>
     <View  style={styles.ViewkL}hitSlop={{}} accessible={true} importantForAccessibility=""auto"" pointerEvents=""auto"">
     <Text  style={StyleSheet.flatten([theme.typography.subtitle1, { color: theme.colors.medium }])}>
       $
     </Text>
     <Text  style={StyleSheet.flatten([theme.typography.subtitle1, { color: theme.colors.medium }])}allowFontScaling={true} accessible={true} ellipsizeMode=""tail"" textBreakStrategy=""highQuality"">
       {item && item[""sale_price""]}
     </Text>
     <Text  style={StyleSheet.flatten([styles.TextfU, theme.typography.subtitle1, { color: theme.colors.light }])}>
       $
     </Text>
     <Text  style={StyleSheet.flatten([styles.TextD7, theme.typography.subtitle1, { color: theme.colors.light }])}accessible={true} textBreakStrategy=""highQuality"" ellipsizeMode=""tail"" allowFontScaling={true}>
       {item && item[""list_price""]}
     </Text>
     </View>
     <View  style={styles.Viewv1}hitSlop={{}} accessible={true} importantForAccessibility=""auto"" pointerEvents=""auto"">
     <Text  style={StyleSheet.flatten([theme.typography.subtitle2, { color: theme.colors.medium }])}ellipsizeMode=""tail"" allowFontScaling={true} textBreakStrategy=""highQuality"" accessible={true}>
       {item && item[""description""]}
     </Text>
     </View>
     </View>
     </View>
   <Icon  style={styles.IconQi}color={theme.colors.strong} name=""Ionicons/ios-arrow-forward"" size={24} />
     </View>
   <Divider  style={styles.DividerX9}height={1} color={theme.colors.divider} />
     </Touchable>
   }  data={data} />)
 }}
</Fetch>
     </View>
     <View  style={styles.Viewve}hitSlop={{}} pointerEvents=""auto"" importantForAccessibility=""auto"" accessible={true}>
     <Button  style={StyleSheet.flatten([styles.ButtonJu, { borderRadius: theme.borderRadius.global }])}type=""solid"">
       Visit Store
     </Button>
     </View>
     </KeyboardAvoidingView>
     </ScreenContainer>
     )
   }
const styles = StyleSheet.create({ Imagej8: {
width: 120, marginBottom: 24, height: 120 }, IconyE: {
width: 24, marginRight: 8, height: 24, alignSelf: ""flex-start"" }, Viewia: {
flexDirection: ""row"", alignItems: ""center"" }, Iconj3: {
height: 24, marginRight: 8, alignSelf: ""flex-start"", width: 24 }, ViewbW: {
flexDirection: ""row"", alignItems: ""center"" }, ViewXn: {
justifyContent: ""space-between"", alignItems: ""center"", flexDirection: ""row"", width: ""100%"" }, ImageLH: {
width: 40, height: 40 }, ViewIn: {
width: 40, height: 40, marginRight: 14 }, ViewcK: {
flexDirection: ""row"", alignItems: ""flex-start"", width: ""100%"", maxWidth: ""80%"" }, ViewAU: {
marginBottom: 12, flexDirection: ""row"", justifyContent: ""space-between"", width: ""100%"", paddingBottom: 12, paddingTop: 12, marginTop: 12, alignItems: ""flex-start"" }, ButtonJu: {
height: 54, justifyContent: ""center"", alignItems: ""center"" }, KeyboardAvoidingView_3h: {
flexGrow: 1 }, Viewuv: {
alignItems: ""flex-start"", paddingRight: 32, paddingLeft: 32, paddingTop: 64, paddingBottom: 34 }, Viewul: {
paddingRight: 34 }, IconQi: {
width: 24, height: 24, marginLeft: 14 }, DividerX9: {
height: 1 }, View_7R: {
paddingTop: 34, paddingBottom: 34, paddingRight: 32, paddingLeft: 32 }, ViewkL: {
width: ""100%"", flexDirection: ""row"", alignItems: ""center"", alignItems: ""center"", marginBottom: 8 }, Text_35: {
textAlign: ""left"", marginBottom: 6 }, Viewve: {
paddingRight: 32, paddingLeft: 32, paddingTop: 14, paddingBottom: 34 }, Viewv1: {
overflow: ""hidden"", maxHeight: 120 }, TextiD: {
textAlign: ""left"" }, TextfU: {
textDecorationLine: ""line-through"", marginLeft: 8 }, TextD7: {
textDecorationLine: ""line-through"", marginLeft: 0 }, TouchableF3: {
marginTop: 12, marginBottom: 6, flexWrap: ""wrap"" }, TouchableDF: {
flexWrap: ""wrap"", marginBottom: 6, marginTop: 2 } })
export default withTheme(REPLACE_SCREEN_NAME);