-- CODE language-jsx --
import React from 'react';
import {
 Divider,
 FieldSearchBarFull,
 ScreenContainer,
 withTheme,
} from '@draftbit/ui';
import {
 FlatList,
 Image,
 ScrollView,
 StyleSheet,
 Text,
 View,
} from 'react-native';
import { Fetch } from 'react-request';
const RestaurantListScreen = props => {
 const [searchBarValue, setSearchBarValue] = React.useState(undefined);
 const { theme } = props;
 return (
   <ScreenContainer
     style={styles.ScreenContainerUM}
     hasSafeArea={true}
     scrollable={false}
   >
     <ScrollView
       showsHorizontalScrollIndicator={true}
       showsVerticalScrollIndicator={true}
       bounces={true}
     >
       <View
         style={styles.Viewyk}
         accessible={true}
         importantForAccessibility="auto"
         hitSlop={{}}
         pointerEvents="auto"
       >
         <FieldSearchBarFull
           style={StyleSheet.flatten([
             styles.FieldSearchBarFullhv,
             {
               borderRadius: theme.borderRadius.global,
               borderColor: theme.colors.divider,
             },
           ])}
           onChange={searchBarValue => setSearchBarValue(searchBarValue)}
           placeholder="Search for nearby restaurants."
           value={searchBarValue}
         />
       </View>
       <Fetch
         url={`https://example-data.draftbit.com/restaurants?_limit=10/`}
         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 (
             <View
               style={styles.Viewxu}
               accessible={true}
               importantForAccessibility="auto"
               hitSlop={{}}
               pointerEvents="auto"
             >
               <Text
                 style={StyleSheet.flatten([
                   theme.typography.headline4,
                   { color: theme.colors.strong },
                 ])}
               >
                 {'Popular Places'}
               </Text>
               <Text
                 style={StyleSheet.flatten([
                   theme.typography.subtitle1,
                   { color: theme.colors.primary },
                 ])}
               >
                 {'5-star Restaurants near your location.'}
               </Text>
               <FlatList
                 renderItem={({ item }) => (
                   <View
                     style={styles.ViewKI}
                     accessible={true}
                     importantForAccessibility="auto"
                     hitSlop={{}}
                     pointerEvents="auto"
                   >
                     <ScrollView
                       showsHorizontalScrollIndicator={true}
                       showsVerticalScrollIndicator={true}
                       bounces={true}
                       horizontal={true}
                     >
                       <View
                         style={StyleSheet.flatten([
                           styles.Viewnj,
                           {
                             backgroundColor: theme.colors.divider,
                             borderRadius: theme.borderRadius.global,
                           },
                         ])}
                         accessible={true}
                         importantForAccessibility="auto"
                         hitSlop={{}}
                         pointerEvents="auto"
                       >
                         <Image
                           style={StyleSheet.flatten([
                             styles.ImageKO,
                             { borderRadius: theme.borderRadius.global },
                           ])}
                           source={{ uri: item['image'] }}
                           resizeMode="cover"
                         />
                         <Text
                           style={StyleSheet.flatten([
                             styles.TextLb,
                             theme.typography.headline6,
                             { color: theme.colors.strong },
                           ])}
                         >
                           {item && item['name']}
                         </Text>
                         <Text
                           style={StyleSheet.flatten([
                             theme.typography.custom18,
                             { color: theme.colors.medium },
                           ])}
                         >
                           {item && item['city']}
                         </Text>
                       </View>
                     </ScrollView>
                   </View>
                 )}
                 contentContainerStyle={styles.FlatListRI}
                 numColumns={1}
                 data={data}
                 horizontal={true}
               />
             </View>
           );
         }}
       </Fetch>
       <Divider
         style={styles.DividerpK}
         color={theme.colors.divider}
         height={1}
       />
       <Fetch
         url={`https://example-data.draftbit.com/restaurants?_page=3`}
         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 (
             <View
               style={styles.ViewPd}
               accessible={true}
               importantForAccessibility="auto"
               hitSlop={{}}
               pointerEvents="auto"
             >
               <Text
                 style={StyleSheet.flatten([
                   theme.typography.headline4,
                   { color: theme.colors.strong },
                 ])}
               >
                 {'In a rush?'}
               </Text>
               <Text
                 style={StyleSheet.flatten([
                   theme.typography.subtitle1,
                   { color: theme.colors.primary },
                 ])}
               >
                 {"Here's the fastest delivery for you."}
               </Text>
               <FlatList
                 renderItem={({ item }) => (
                   <View
                     style={styles.ViewSw}
                     accessible={true}
                     importantForAccessibility="auto"
                     hitSlop={{}}
                     pointerEvents="auto"
                   >
                     <ScrollView
                       showsHorizontalScrollIndicator={true}
                       showsVerticalScrollIndicator={true}
                       bounces={true}
                       horizontal={true}
                     >
                       <View
                         style={StyleSheet.flatten([
                           styles.ViewE2,
                           {
                             backgroundColor: theme.colors.divider,
                             borderRadius: theme.borderRadius.global,
                           },
                         ])}
                         accessible={true}
                         importantForAccessibility="auto"
                         hitSlop={{}}
                         pointerEvents="auto"
                       >
                         <Image
                           style={StyleSheet.flatten([
                             styles.ImageWb,
                             { borderRadius: theme.borderRadius.global },
                           ])}
                           source={{ uri: item['image'] }}
                           resizeMode="cover"
                         />
                         <Text
                           style={StyleSheet.flatten([
                             styles.TextKC,
                             theme.typography.headline6,
                             { color: theme.colors.strong },
                           ])}
                         >
                           {item && item['name']}
                         </Text>
                         <Text
                           style={StyleSheet.flatten([
                             theme.typography.custom18,
                             { color: theme.colors.medium },
                           ])}
                         >
                           {item && item['city']}
                         </Text>
                       </View>
                     </ScrollView>
                   </View>
                 )}
                 contentContainerStyle={styles.FlatListiz}
                 numColumns={1}
                 data={data}
                 horizontal={true}
               />
             </View>
           );
         }}
       </Fetch>
       <Divider
         style={styles.DividerrH}
         color={theme.colors.divider}
         height={1}
       />
       <Fetch
         url={`https://example-data.draftbit.com/restaurants?_page=10`}
         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 (
             <View
               style={styles.View_1P}
               accessible={true}
               importantForAccessibility="auto"
               hitSlop={{}}
               pointerEvents="auto"
             >
               <Text
                 style={StyleSheet.flatten([
                   theme.typography.headline4,
                   { color: theme.colors.strong },
                 ])}
               >
                 {"Today's Offers"}
               </Text>
               <Text
                 style={StyleSheet.flatten([
                   theme.typography.subtitle1,
                   { color: theme.colors.primary },
                 ])}
               >
                 {"Offers you can't refuse."}
               </Text>
               <FlatList
                 renderItem={({ item }) => (
                   <View
                     style={styles.View_1Q}
                     accessible={true}
                     importantForAccessibility="auto"
                     hitSlop={{}}
                     pointerEvents="auto"
                   >
                     <ScrollView
                       showsHorizontalScrollIndicator={true}
                       showsVerticalScrollIndicator={true}
                       bounces={true}
                     >
                       <View
                         style={StyleSheet.flatten([
                           styles.ViewfC,
                           {
                             backgroundColor: theme.colors.divider,
                             borderRadius: theme.borderRadius.global,
                           },
                         ])}
                         accessible={true}
                         importantForAccessibility="auto"
                         hitSlop={{}}
                         pointerEvents="auto"
                       >
                         <Image
                           style={StyleSheet.flatten([
                             styles.ImageZ0,
                             { borderRadius: theme.borderRadius.global },
                           ])}
                           source={{ uri: item['image'] }}
                           resizeMode="cover"
                         />
                         <Text
                           style={StyleSheet.flatten([
                             theme.typography.headline6,
                             { color: theme.colors.strong },
                           ])}
                         >
                           {item && item['name']}
                         </Text>
                         <Text
                           style={StyleSheet.flatten([
                             theme.typography.custom18,
                             { color: theme.colors.medium },
                           ])}
                         >
                           {item && item['city']}
                         </Text>
                       </View>
                     </ScrollView>
                   </View>
                 )}
                 contentContainerStyle={styles.FlatListLk}
                 numColumns={1}
                 horizontal={true}
                 data={data}
               />
             </View>
           );
         }}
       </Fetch>
     </ScrollView>
   </ScreenContainer>
 );
};
const styles = StyleSheet.create({
 ScreenContainerUM: {
   marginLeft: 20,
   marginRight: 20,
   marginTop: 30,
 },
 Viewyk: {
   marginBottom: 10,
   marginTop: 20,
 },
 FieldSearchBarFullhv: {
   borderTopWidth: 1,
   borderBottomWidth: 1,
   width: '100%',
   borderRightWidth: 1,
   borderLeftWidth: 1,
 },
 Viewnj: {
   width: 250,
   height: 150,
   marginRight: 20,
 },
 ImageKO: {
   width: 250,
   height: 150,
 },
 ViewPd: {
   marginTop: 24,
 },
 ViewSw: {
   marginTop: 24,
   marginBottom: 24,
   height: 200,
 },
 ImageWb: {
   width: 250,
   height: 150,
 },
 ViewE2: {
   width: 250,
   height: 150,
   marginRight: 20,
 },
 View_1P: {
   marginTop: 24,
 },
 View_1Q: {
   marginTop: 24,
   marginBottom: 24,
   height: 220,
 },
 ImageZ0: {
   width: 250,
   height: 150,
 },
 ViewfC: {
   width: 250,
   height: 150,
   marginRight: 20,
 },
 TextLb: {
   marginTop: 4,
 },
 TextKC: {
   marginTop: 4,
 },
 FlatListRI: {
   flexDirection: 'row',
   height: 220,
 },
 DividerpK: {
   height: 1,
 },
 FlatListiz: {
   flexDirection: 'row',
   height: 220,
 },
 FlatListLk: {
   height: 220,
 },
 Viewxu: {
   marginTop: 10,
 },
 ViewKI: {
   marginTop: 24,
   marginBottom: 24,
   height: 200,
 },
 DividerrH: {
   height: 1,
 },
});
export default withTheme(RestaurantListScreen);