/* eslint-disable react/style-prop-object */
import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { StyleSheet, View, Animated } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import { Div, Button } from 'react-native-magnus';
import { FAB } from 'react-native-paper';
import Constants from 'expo-constants';
import useModel from 'flooks';
import { useMount } from '@umijs/hooks';
import { useAnimation } from 'react-native-animation-hooks';
import { useTranslation } from 'react-i18next';

import Header from './Home/HomeHeader';
import Banner from './Home/Banner';
import MenuCom from './Home/Menu';
import List from './Home/List';
import ListTop from './Home/ListTop';
import RecommendStore from './Home/RecommendStore';
import SpecialArea from './Home/SpecialArea';
import HomeModel from './Home/model';
import Icon from '../../components/SvgIcon';
import TimScreen from '../../chat/TimScreen.tsx';

export default function HomeScreen({ navigation }) {
  const { t } = useTranslation();
  const { initHome, list, loadingTop } = useModel(HomeModel, [
    'list',
    'loadingTop',
  ]);

  const [scrollEnabled, setscrollEnabled] = React.useState(true);

  const [topHeight, settopHeight] = React.useState(100);

  const animatedScrollYValue = React.useRef(new Animated.Value(0)).current;
  useMount(() => {
    initHome();
  });

  return (
    <>
      <Div h={Constants.statusBarHeight} bg="white" />

      <Animated.ScrollView
        contentContainerStyle={styles.container}
        scrollEventThrottle={16}
        onScroll={
          Animated.event(
            [
              {
                nativeEvent: {
                  contentOffset: { y: animatedScrollYValue },
                }, // 记录滑动距离
              },
            ],
            { useNativeDriver: true }
          ) // 使用原生动画驱动}
        }
        stickyHeaderIndices={[1]}
      >
        <Header />

        <Div bg="white">
          <Button
            bg="gray200"
            color="gray500"
            block
            fontSize="xs"
            mx={15}
            my={10}
            onPress={() => navigation.navigate('Search')}
          >
            {t('sou-suo')}
          </Button>
        </Div>
        {!loadingTop && (
          <View
            onLayout={({ nativeEvent }) => {
              settopHeight(nativeEvent.layout.height);
            }}
          >
            <Banner />
            <MenuCom />
            <SpecialArea />
            <RecommendStore />
          </View>
        )}

        <ListTop
          animatedScrollYValue={animatedScrollYValue}
          topHeight={topHeight}
          setscrollEnabled={setscrollEnabled}
        />
        <List />
      </Animated.ScrollView>
      <FAB
        style={styles.fab}
        icon={({ size }) => (
          <Icon width={size} height={size} name="cart" type="info" />
        )}
        color="#fff"
        onPress={() => console.log('Pressed')}
      />
      <TimScreen />
    </>
  );
}
HomeScreen.navigationOptions = {
  header: null,
};

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    backgroundColor: '#fff',
  },
  contentStyle: {
    height: 20,
  },
  text: {
    fontSize: 10,
    color: '#AAAAAA',
  },
  main: {
    flex: 1,
    paddingTop: 10,
    width: '100%',
  },
  fab: {
    position: 'absolute',
    margin: 16,
    right: 0,
    bottom: 0,
    backgroundColor: '#fff',
  },
});