Untitled

import React, {useState, useEffect, useContext} from 'react';
import {
  Layout,
  Text,
  withStyles,
  Button,
  TabView,
  Tab,
  Icon,
  List,
  ListItem,
} from '@ui-kitten/components';
import axios from 'axios';
import ProductList from '../../components/List/ProductList';
import Constants from '../../constants';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {ShoppingContext} from '../../context/appContext';
import * as Animatable from 'react-native-animatable';
import {View} from 'react-native';
import {Platform, TouchableOpacity, Image, Dimensions} from 'react-native';
import {Buffer} from 'buffer';
import {DrawerActions} from '@react-navigation/native';
import Frame from '../../components/Page/frame';
import Modal from 'react-native-modal';

function CurrentlyScreen(props) {
  const {state, dispatch} = useContext(ShoppingContext);
  const {navigation, route} = props;

  const [loading, setLoading] = useState(false);
  const [conditions, setConditions] = useState(null);
  const [destinationName, setDestinationName] = useState(state.conditions.destinationName);
  const [datetime, setDatetime] = useState();
  const [selectedTab, setSelectedTab] = useState(0);
  const [products, setProducts] = useState([]);
  const [dataOffset, setDataOffset] = useState(null);
  const [selectedProducts, setSelectedProducts] = useState([]);
  const [totalRemain, setTotalRemain] = useState(null);
  const [stock, setStock] = useState(null);
  const [isModalVisible, setIsModalVisible] = useState(false);

  // const {width, height, scale} = Dimensions.get('window');

  useEffect(() => {
    getProducts();
  }, [destinationName]);

  async function getProducts() {
    setProducts([])
    if (loading) {
      return;
    }
    setLoading(true);
    const userToken = await AsyncStorage.getItem('access_token');
    try {
      const response = await axios.get(`${Constants.SERVER_URL}/stores/Now`, {
        params: {
          machine_id: state.conditions.destinationID,
        },
        headers: {
          Authorization: `Bearer ${userToken}`,
        },
      });
      const {
        data: {items},
      } = response;
      //   const begin_time = conditions.date.split(' ')[1];
      //   const timestamp = TimePeriod[begin_time];
      // console.log("==",items)

      setProducts(items);
    } catch (error) {
      alert('無法取得商品');
      console.log(error);
    }
    setLoading(false);
  }

  return (
    <Frame
      headLeft={
        <TouchableOpacity
          onPress={() => {
            navigation.navigate('Destination');
          }}>
          <Icon
            style={{color: 'white'}}
            name="arrow-back-ios"
            pack="material"
          />
        </TouchableOpacity>
      }
      headCenter={<Text style={{fontSize: 20, color: '#fff'}}>Currently</Text>}
      headRight={
        <TouchableOpacity
          onPress={() => {
            navigation.dispatch(DrawerActions.toggleDrawer());
          }}>
          <Icon
            style={{
              width: 28,
              height: 28,
            }}
            fill="#fff"
            name="person"
          />
        </TouchableOpacity>
      }
      body={
        <List
          keyExtractor={item => `${item.id}`}
          numColumns={1}
          data={products}
          renderItem={renderProductList}
          style={{flex: 1}}
          contentContainerStyle={{flexGrow: 1, padding: 12, paddingBottom: 50}}
        />
      }
    />
  );

  function renderProductList({item, index}) {
    return (
      <ListItem style={{margin: 6}}>
        <Layout style={{width: '100%', flex: 1}}>
          <View
            style={{
              paddingHorizontal: 1,
              marginTop: 20,
              flexDirection: 'row',
              flexWrap: 'wrap',
            }}>
            <View>
              <Text category="s1" style={{fontSize: 20, marginTop: 10}}>
                {item.product_name}
              </Text>
              <Text
                category="s1"
                style={{
                  paddingVertical: 12,
                  fontWeight: 'bold',
                  //   color: theme['color-primary-900'],
                }}>
                {item.price}
                <Text
                  appearance="hint"
                  category="c1"
                  style={{fontSize: 12, fontWeight: 'bold'}}>
                  {' '}
                  NTD
                </Text>
              </Text>
              {/* <View style={{paddingTop: 5, marginRight: 100}}>
                <Text appearance="hint" style={{fontSize: 16}}>
                  {item.description || '商家尚未提供說明'}
                </Text>
              </View> */}

              <View
                style={{
                  marginLeft: 4,
                  marginBottom: 20,
                  width: 100,
                  // alignSelf: 'center',
                }}>
                <Button
                  accessoryLeft={props => {
                    return (
                      // <Text>{JSON.stringify(props.style)}</Text>
                      <Icon
                        style={{
                          ...props,
                          marginHorizontal: 0,
                          width: '2%',
                          height: '2%',
                        }}
                        fill="red"
                        name="heart-outline"
                      />
                    );
                  }}
                  size="tiny"
                  onPress={() => {
                    dispatch({
                      ...state,
                      products: [item],
                    });
                    navigation.navigate('CurrentlyPay');
                  }}>
                  立即付款
                </Button>
              </View>
            </View>
            <View
              style={{
                //  alignSelf: 'flex-end',
                position: 'absolute',
                right: 0,
              }}>
              <Image
                style={{
                  resizeMode: 'stretch',
                  width: 140,
                  height: 120,
                  // flex: 0.8,
                  backgroundColor: '#fff',
                }}
                source={{uri: item.url}}
              />
            </View>
          </View>
        </Layout>
      </ListItem>
    );
  }
}
export default CurrentlyScreen;