import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import {
  Image,
  StyleSheet,
  TouchableOpacity,
  ImageBackground,
  View,
} from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import { useModel } from "flooks";
import {
  Layout,
  Text,
  useTheme,
  Button,
  Card,
  Icon,
  MenuItem,
  OverflowMenu,
  TopNavigation,
  TopNavigationAction,
} from "@ui-kitten/components";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import { useFocusEffect } from "@react-navigation/native";
import Badge from "../components/Badge";
import HomePage1 from "./HomeScreenPage1";
import HomePage2 from "./Comment";
import HomePage3 from "./HomeScreenPage3";
import * as RootNavigation from "../navigation/RootNavigation";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F0F0F0",
  },
  touch: {
    width: 53,
    height: 53,
    position: "absolute",
    left: 10,
    top: 10,
    zIndex: 2,
  },
  icon: {
    width: 53,
    height: 53,
    backgroundColor: "#E5E5E5",
    borderRadius: 3,
  },
  text: {
    fontWeight: "500",
    marginBottom: 7,
  },
  button: {
    marginTop: 19,
  },
  banner: {
    height: 100,
    backgroundColor: "#E5E5E5",
    position: "absolute",
    left: 0,
    right: 0,
    top: 0,
    zIndex: 1,
  },
  FlexRow: {
    flexDirection: "row",
    alignItems: "center",
    marginTop: 2,
  },
  zanImg: {
    width: 12,
    height: 12,
    marginRight: 3,
  },
  layItem: {
    width: 40,
    marginRight: 10,
  },
  cardMain: {
    alignItems: "center",
    zIndex: 1,
  },
  cardTop: {
    minHeight: 53,
    alignItems: "center",
    justifyContent: "center",
    paddingBottom: 10,
  },
  allBadges1: {
    marginHorizontal: 10,
  },
  allBadges: {
    overflow: "hidden",
    height: 20,
    marginHorizontal: 10,
  },
  more: {
    position: "absolute",
    right: 5,
    top: 57,
  },
  badges: {
    flexDirection: "row",
    flexWrap: "wrap",
    alignSelf: "center",
    backgroundColor: "rgba(0,0,0,0)",
  },
  badge: {
    marginRight: 15,
    marginTop: 3,
  },
  labelText: {
    textAlign: "left",
    fontSize: 13,
    paddingHorizontal: 10,
    minWidth: 120,
    maxWidth: "100%",
  },
  homeCard: {
    zIndex: 2,
    marginHorizontal: 15,
    marginTop: 80,
  },
  mainContent: {
    marginTop: 0,
    backgroundColor: "transparent",
  },
  tab: {
    backgroundColor: "#eee",
  },
  tabContainer: {
    backgroundColor: "transparent",
  },
  tabIndicator: {
    backgroundColor: "#FFC21C",
  },
  btn: {
    maxWidth: "100%",
    overflow: "hidden",
    paddingLeft: 30,
  },
});

const Tab = createMaterialTopTabNavigator();
const labelText = (focused, title) => (
  <Text category="s1" status={focused ? "primary" : ""}>
    {title}
  </Text>
);
const NextIcon = props => <Icon {...props} name="arrow-ios-downward" />;

const SearchIcon = props => <Icon {...props} name="search-outline" />;
const MailIcon = props => <Icon {...props} name="email-outline" />;
const ShareIcon = props => <Icon {...props} name="share-outline" />;

const MenuIcon = props => <Icon {...props} name="more-vertical" />;

const LogoutIcon = props => <Icon {...props} name="log-out" />;

const img1 = require("../assets/images/zan.png");

const img2 = require("../assets/images/cai.png");

export default function HomeScreen({ navigation, route }) {
  const theme = useTheme();
  const { changeBackground } = useModel("barModel");
  const {
    showName,
    logo,
    proclamation,
    updateMerchant,
    banner,
    userLogout,
    monthSales,
    goodNum,
    badNum,
    firstOrder,
  } = useModel("userModel");

  const {
    homeBar,
    homeTip1,
    homeTitle3,
    homeTip2,
    homeTip3,
    homeTab1,
    homeTab2,
    homeTab3,
    fullReduction2,
    fullReduction1,
    ABSYHA,
    HXRNYH,
    MPSFFU,
    changeLocal,
    local,
  } = useModel("wordsModel");
  const [fullReductions, changeFllReduction] = React.useState([]);
  const { showDialog } = useModel("dialogModel", true);
  const { httpGet } = useModel("httpModel", true);
  const { getPlaf } = useModel("couponModel", true);

  const [showMore, changeShow] = React.useState(false);

  const [couponList, setCouponList] = React.useState([]);
  //   const couponTips = React.useMemo(() => {
  //     if (couponList.length > 0) {
  //       return couponList
  //         .map(item => {
  //           return item.name;
  //         })
  //         .join(",");
  //     }
  //     return "";
  //   }, [couponList]);

  useFocusEffect(
    React.useCallback(() => {
      changeBackground(theme["color-primary-500"]);
      httpGet("/fullReduction/my").then(res => {
        changeFllReduction(res);
      });
      getPlaf().then(res => {
        setCouponList(res);
      });
    }, [])
  );

  const [menuVisible, setMenuVisible] = React.useState(false);

  const toggleMenu = () => {
    setMenuVisible(!menuVisible);
  };

  const renderMenuAction = () => (
    <TopNavigationAction icon={MenuIcon} onPress={toggleMenu} />
  );

  const renderRightActions = () => (
    <>
      <TopNavigationAction
        icon={SearchIcon}
        onPress={() => {
          RootNavigation.navigate("Search");
        }}
      />
      <TopNavigationAction
        icon={MailIcon}
        onPress={() => {
          RootNavigation.navigate("SystemEmail");
        }}
      />
      <TopNavigationAction icon={ShareIcon} />
      <OverflowMenu
        anchor={renderMenuAction}
        visible={menuVisible}
        onBackdropPress={toggleMenu}
      >
        <MenuItem
          accessoryLeft={LogoutIcon}
          title={MPSFFU}
          onPress={() => {
            toggleMenu();
            userLogout();
          }}
        />
        <MenuItem title="0904版本" />
        <MenuItem title={`切换语言(${local})`} onPress={changeLocal} />
      </OverflowMenu>
    </>
  );

  const renderBackAction = () => <Text category="h6">{homeBar}</Text>;

  const badgeList = list => {
    return list.map(item => {
      return (
        <Badge style={styles.badge} key={item.id}>
          {fullReduction1}
          {item.fullAmount}
          {fullReduction2}
          {item.minusAmount}
        </Badge>
      );
    });
  };

  const CoupnbadgeList = list => {
    return list.map((item, index) => {
      return (
        <Badge style={styles.badge} key={`coupon${index}`}>
          {item.name}
        </Badge>
      );
    });
  };
  const [scrollRef, setScroll] = React.useState();

  React.useEffect(() => {
    const unsubscribe = navigation.addListener("tabPress", () => {
      if (route.name === "Home") {
        navigation.jumpTo("homeTab1");
        if (scrollRef) {
          scrollRef.scrollTo({ x: 0, y: 0, animated: true });
        }
      }
    });

    return unsubscribe;
  }, [navigation]);

  return (
    <>
      <TopNavigation
        appearance="homeBar"
        alignment="center"
        accessoryLeft={renderBackAction}
        accessoryRight={renderRightActions}
      />
      <ScrollView contentContainerStyle={{ flexGrow: 1 }} ref={setScroll}>
        <Layout style={styles.container}>
          <ImageBackground source={{ uri: banner }} style={styles.banner}>
            <Button
              appearance="bannerButton"
              onPress={() =>
                RootNavigation.navigate("EditBanner", {
                  type: "banner",
                })
              }
            >
              {homeTip1}
            </Button>
          </ImageBackground>

          <Card disabled appearance="homeCard" style={styles.homeCard}>
            <TouchableOpacity
              style={styles.touch}
              onPress={() =>
                RootNavigation.navigate("EditBanner", {
                  type: "logo",
                })
              }
            >
              <Image source={{ uri: logo }} style={styles.icon} />
            </TouchableOpacity>

            <Layout style={styles.cardMain}>
              <Layout style={styles.cardTop}>
                <Text>{showName}</Text>
                <Layout style={[styles.FlexRow]}>
                  <Layout style={[styles.FlexRow, styles.layItem]}>
                    <Image source={img1} style={styles.zanImg} />
                    <Text category="c1" status="primary">
                      {goodNum || 0}
                    </Text>
                  </Layout>
                  <Layout style={[styles.FlexRow, styles.layItem]}>
                    <Image source={img2} style={styles.zanImg} />
                    <Text category="c1" status="info">
                      {badNum || 0}
                    </Text>
                  </Layout>
                  <Layout>
                    <Text category="c1" status="info">
                      {`${homeTip2} :`}
                      {monthSales || 0}
                    </Text>
                  </Layout>
                </Layout>
              </Layout>
              <View style={styles.more}>
                <Icon
                  fill="#000"
                  style={{ width: 10, height: 10 }}
                  name="arrow-ios-downward"
                />
              </View>
              <TouchableOpacity
                key="event"
                style={[showMore ? styles.allBadges1 : styles.allBadges]}
                onPress={() => {
                  changeShow(!showMore);
                }}
              >
                <Layout style={styles.badges}>
                  {badgeList(fullReductions)}
                  {firstOrder !== 0 &&
                    firstOrder !== null &&
                    firstOrder !== "" && (
                      <Badge style={styles.badge} key="firstOrder">
                        {HXRNYH}
                        {firstOrder}
                      </Badge>
                    )}
                  {CoupnbadgeList(couponList)}
                </Layout>
              </TouchableOpacity>
            </Layout>
            <Button
              style={styles.btn}
              key="boad"
              appearance="ghost"
              status="info"
              accessoryRight={NextIcon}
              onPress={() => {
                showDialog({
                  pla: "",
                  maxLength: 50,
                  defaultValue: proclamation,
                  isEdit: true,
                  title: homeTitle3,
                  cancelable: true,
                  confirmCallback: info => {
                    updateMerchant({ proclamation: info });
                  },
                });
              }}
            >
              <Text
                style={styles.labelText}
                numberOfLines={1}
                ellipsizeMode="tail"
              >
                {`${homeTip3}:`}
                {proclamation || ABSYHA}
              </Text>
            </Button>
          </Card>

          <Layout style={styles.mainContent}>
            <Tab.Navigator
              initialRouteName="homeTab1"
              lazy
              backBehavior="initialRoute"
              unmountOnBlur
              tabBarOptions={{
                activeTintColor: "#FFC21C",
                inactiveTintColor: "#000",
                style: styles.tab,
                indicatorStyle: styles.tabIndicator,
                labelStyle: styles.tab,
              }}
            >
              <Tab.Screen
                name="homeTab1"
                component={HomePage1}
                options={{
                  tabBarLabel: ({ focused }) => labelText(focused, homeTab1),
                }}
              />
              <Tab.Screen
                name="homeTab2"
                component={HomePage2}
                options={{
                  tabBarLabel: ({ focused }) => labelText(focused, homeTab2),
                }}
              />
              <Tab.Screen
                name="homeTab3"
                component={HomePage3}
                options={{
                  tabBarLabel: ({ focused }) => labelText(focused, homeTab3),
                }}
              />
            </Tab.Navigator>
          </Layout>
        </Layout>
      </ScrollView>
    </>
  );
}