import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { StyleSheet } from "react-native";
import {
  Layout,
  useTheme,
  Button,
  Icon,
  Menu,
  MenuItem,
  MenuGroup,
} from "@ui-kitten/components";
import { useModel } from "flooks";
import { useFocusEffect } from "@react-navigation/native";
import NavHeaderBar from "../components/NavHeaderBar";

const ForwardIcon = props => (
  <Icon
    {...props}
    name="arrow-ios-forward"
    fill="#B4B4B4"
    style={{ width: 15, height: 15, fontWeight: 500 }}
  />
);

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#EEEEEE",
    flex: 1,
  },
  menu: {
    flex: 1,
    backgroundColor: "#EEEEEE",
    marginBottom: 50,
  },
  menuItem: { marginVertical: 3 },
  menuGroup: {
    marginTop: 3,
  },
  menuGroup2: {
    marginTop: 6,
  },
  loginOut: {
    position: "absolute",
    bottom: 10,
    left: 20,
    right: 20,
  },
});

export default function UserScreen({ navigation }) {
  const theme = useTheme();
  const { changeBackground } = useModel("barModel");
  const { closeMer, isOpening } = useModel("userModel");

  const {
    tab3,
    userTitle1,
    userTitle2,
    userTitle3,
    userTitle4,
    userTitle5,
    userTitle6,
    userTitle31,
    userTitle32,
    userTitle33,
    userTitle34,
    userTitle41,
    userTitle42,
    userTitle61,
    userTitle62,
    userTitle21,
    // userTitle22,
    userTitle23,
    userTitle24,
    DMCJVT,
    BZIQEA,
    YUZQBC,
    HMVTGZ,
  } = useModel("wordsModel");

  useFocusEffect(
    React.useCallback(() => {
      changeBackground(theme["color-primary-500"]);
    }, [])
  );

  return (
    <>
      <NavHeaderBar title={tab3} back={false} />

      <Layout style={styles.container} level="1">
        <Menu style={styles.menu}>
          <MenuItem
            title={userTitle1}
            accessoryRight={ForwardIcon}
            style={styles.menuItem}
            onPress={() => {
              navigation.navigate("Home", {
                screen: "homeTab3",
              });
            }}
          />
          <MenuGroup title={userTitle2} style={styles.menuGroup}>
            <MenuItem
              title={userTitle21}
              accessoryRight={ForwardIcon}
              onPress={() => {
                navigation.navigate("FullReduction");
              }}
            />
            {/* <MenuItem
              title={userTitle22}
              accessoryRight={ForwardIcon}
              onPress={() => {
                navigation.navigate("AddClassification", {
                  type: "signboard",
                });
              }}
            /> */}
            <MenuItem
              title={userTitle23}
              accessoryRight={ForwardIcon}
              onPress={() => {
                navigation.navigate("FirstOrder");
              }}
            />
            <MenuItem
              title={userTitle24}
              accessoryRight={ForwardIcon}
              onPress={() => {
                navigation.navigate("CouponList");
              }}
            />
          </MenuGroup>
          <MenuGroup title={userTitle3} style={styles.menuGroup2}>
            <MenuItem
              title={userTitle31}
              accessoryRight={ForwardIcon}
              onPress={() => {
                navigation.navigate("EditGoods");
              }}
            />
            <MenuItem
              title={userTitle32}
              accessoryRight={ForwardIcon}
              onPress={() => {
                navigation.navigate("ClassificationManage");
              }}
            />
            <MenuItem
              title={userTitle33}
              accessoryRight={ForwardIcon}
              onPress={() => {
                navigation.navigate("AddClassification", {
                  type: "signboard",
                });
              }}
            />
            <MenuItem
              title={userTitle34}
              accessoryRight={ForwardIcon}
              onPress={() => {
                navigation.navigate("AddClassification", {
                  type: "recommend",
                });
              }}
            />
          </MenuGroup>
          <MenuGroup title={userTitle4} style={styles.menuGroup2}>
            <MenuItem
              title={userTitle41}
              accessoryRight={ForwardIcon}
              onPress={() => {
                navigation.navigate("OrderSetting");
              }}
            />
            <MenuItem
              title={userTitle42}
              accessoryRight={ForwardIcon}
              onPress={() => {
                navigation.navigate("OrderSetting");
              }}
            />
          </MenuGroup>
          <MenuGroup title={userTitle5} style={styles.menuGroup2}>
            <MenuItem
              title={HMVTGZ}
              accessoryRight={ForwardIcon}
              onPress={() => {
                navigation.navigate("Automatic");
              }}
            />
            <MenuItem
              title={YUZQBC}
              accessoryRight={ForwardIcon}
              onPress={() => {
                navigation.navigate("Complaintlist");
              }}
            />
          </MenuGroup>
          <MenuGroup title={userTitle6} style={styles.menuGroup2}>
            <MenuItem
              title={userTitle61}
              accessoryRight={ForwardIcon}
              onPress={() => {
                navigation.navigate("Money");
              }}
            />
            <MenuItem
              title={userTitle62}
              accessoryRight={ForwardIcon}
              onPress={() => {
                navigation.navigate("Bank");
              }}
            />
          </MenuGroup>

          <MenuGroup title="设置" style={styles.menuGroup2}>
            <MenuItem
              title="密码设置"
              accessoryRight={ForwardIcon}
              onPress={() => {
                navigation.navigate("Money");
              }}
            />

            <MenuItem
              title="配送设置"
              accessoryRight={ForwardIcon}
              onPress={() => {
                navigation.navigate("Distribution");
              }}
            />
          </MenuGroup>

          <MenuItem
            title="培训中心"
            accessoryRight={ForwardIcon}
            style={styles.menuItem}
            onPress={() => {
              // navigation.navigate("Home", {
              //   screen: "homeTab3",
              // });
            }}
          />

          {/* <MenuGroup title='Akveo React Native'>
                            <MenuItem title='UI Kitten' />
                            <MenuItem title='Kitten Tricks' />
                        </MenuGroup> */}
        </Menu>

        <Layout style={styles.loginOut}>
          <Button
            appearance={isOpening ? "outline" : "fill"}
            onPress={closeMer}
          >
            {isOpening ? BZIQEA : DMCJVT}
          </Button>
        </Layout>
      </Layout>
    </>
  );
}