import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import {
  ImageBackground,
  StyleSheet,
  Animated,
  Dimensions,
  View,
} from 'react-native';
import { Flex } from '@ant-design/react-native';
import { ScrollView } from 'react-native-gesture-handler';
import { Div, Text, Button } from 'react-native-magnus';
import Constants from 'expo-constants';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

import { useRoute } from '@react-navigation/native';
import { useDebounceFn } from '@umijs/hooks';
// import { useAnimation } from 'react-native-animation-hooks';

import useModel from 'flooks';
import Detail from './model'; // detail模块通用方法
// import Text from '../../components/Text';
// import Button from '../../components/Button';

import Header from './Header';
import Center from './Center';

import Order from './Order';
import Cart from './Cart'; // order 页面的选购
import Comment from './Comment'; // order 页面的选购
import Merchant from './Merchant'; // order 页面的选购
import SelectSpecification from './SelectSpecification'; // order 页面的选购

const Tab = createMaterialTopTabNavigator();

export default function MerchantDetail({ navigation }) {
  const route = useRoute();
  const { params } = route;

  const { init, merchantInfo, setHeaderColor } = useModel(Detail, ['id']);
  const [tabTop, settabTop] = React.useState(0);
  const [screenName, setscreenName] = React.useState('Order');

  const { banner } = merchantInfo;

  const scorellRef = React.createRef();

  const { run } = useDebounceFn(() => {
    scorellRef.current.scrollTo({
      x: 0,
      y: tabTop,
      animated: true,
    });
  }, 1200);

  React.useEffect(() => {
    if (params.merchantId) {
      init(params.merchantId);
    }
    if (params.screen) {
      setscreenName(params.screen);
    } else {
      setscreenName('Order');
    }
  }, [params]);

  return (
    <>
      <Header />
      <ScrollView
        ref={scorellRef}
        stickyHeaderIndices={[1]}
        style={{
          flexGrow: 1,
        }}
        contentContainerStyle={{ backgroundColor: '#eee' }}
        keyboardDismissMode="on-drag"
        onScroll={({ nativeEvent }) => {
          const { contentOffset } = nativeEvent;
          const topHeight = 118 + Constants.statusBarHeight;
          if (contentOffset.y >= 5 && contentOffset.y <= topHeight) {
            const op = (contentOffset.y / topHeight).toFixed(1);
            setHeaderColor(`rgba(255, 194, 28, ${Number(op)})`);
          } else if (contentOffset.y < 5) {
            setHeaderColor('');
          }
        }}
        scrollEventThrottle={16}
      >
        <Div
          onLayout={(e) => {
            settabTop(e.nativeEvent.layout.height);
          }}
          zIndex={12}
        >
          <ImageBackground
            style={{
              height: 118 + Constants.statusBarHeight,
            }}
            resizeMode="cover"
            source={{ uri: banner }}
          >
            <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,.1)' }} />
          </ImageBackground>
          <Center />
        </Div>
        <Div bg="brand500" pt={56 + Constants.statusBarHeight}>
          <Div row bg="gray200">
            <Button
              flex={1}
              bg="hide"
              color={screenName === 'Order' ? 'brand500' : 'gray600'}
              h={60}
              onPress={() => {
                run();
                navigation.navigate('MerchantDetail', {
                  screen: 'Order',
                });
              }}
            >
              订单
            </Button>
            <Button
              flex={1}
              bg="hide"
              color={screenName === 'Comment' ? 'brand500' : 'gray600'}
              h={60}
              onPress={() => {
                run();

                navigation.navigate('MerchantDetail', {
                  screen: 'Comment',
                });
              }}
            >
              评论
            </Button>
            <Button
              flex={1}
              bg="hide"
              color={screenName === 'Merchant' ? 'brand500' : 'gray600'}
              h={60}
              onPress={() => {
                run();
                navigation.navigate('MerchantDetail', {
                  screen: 'Merchant',
                });
              }}
            >
              商家
            </Button>
          </Div>
        </Div>
        <Div minH={Dimensions.get('window').height}>
          <Tab.Navigator
            initialRouteName="Order"
            tabBarOptions={{ showLabel: false, style: { height: 0 } }}
            initialLayout={{
              height: Dimensions.get('window').height,
              width: Dimensions.get('window').width,
            }}
            backBehavior="initialRoute"
          >
            <Tab.Screen name="Order" component={Order} />
            <Tab.Screen name="Comment" component={Comment} />
            <Tab.Screen name="Merchant" component={Merchant} />
          </Tab.Navigator>
        </Div>
      </ScrollView>
      <Cart />
      <SelectSpecification />
    </>
  );
}

const styles = StyleSheet.create({});