import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import {
    StyleSheet,
} from "react-native";
import { useModel } from "flooks";
import {
    Text,
    useTheme,
    MenuItem,
    Toggle,
    Icon,
} from "@ui-kitten/components";
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({
	  top: {
		  flexDirection: "row",
		  alignItems: "center",
		  paddingVertical: 10,
		  marginBottom: 10,
		  justifyContent: "space-between",
	  },
	  list: {
		  flex: 1,
		  backgroundColor: "#fff",
		  paddingHorizontal: 15,
		  // paddingTop: 20,
		  marginTop: 20,
	  },
	  separatorStyle: {
		  marginHorizontal: 13,
	  },
	  main: {
		  marginTop: 10,
		  paddingHorizontal: 15,
		  paddingVertical: 10,
	  },
	  content: {
		  color: "#787878",
		  paddingVertical: 10,
		  borderTopWidth: 1,
		  borderColor: "#E5E5E5",
	  },
	  text: {
		  color: "#787878",
		  marginTop: 5,
	  },
	  wait: {
		  textAlign: "center",
		  paddingVertical: 20,
	  },
	  menuItem: {},
	  title: {
		  padding: 15,
	  },
	  bottom: {
		  marginTop: 10,
	  },
  });

export default function OrderSettingScreen({ navigation }) {
    const theme = useTheme();
    const { changeBackground } = useModel("barModel");
    // const { automaticOrder } = useModel("userModel");

    const { GLWBTR, NMQKWY, CNPBSH, OEUMXU, SOHDGP } = useModel("wordsModel");
    // const { getMyList } = useModel("emailModel");

    const [automaticOrder, changeautoMaticOrder] = React.useState(true);
    const [voice1, changeVoice1] = React.useState(true);
    const [voice2, changeVoice2] = React.useState(true);

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


    return (
      <>
        <NavHeaderBar title={SOHDGP} />

        <MenuItem
          title={GLWBTR}
          accessoryRight={() => (
            <Toggle
              key="Toggle"
              checked={automaticOrder}
              onChange={changeautoMaticOrder}
            />
          )}
          style={styles.menuItem}
        />

        <Text style={styles.title}>订单语音配置</Text>
        <MenuItem
          title={OEUMXU}
          accessoryRight={() => (
            <Toggle key="Toggle2" checked={voice1} onChange={changeVoice1} />
          )}
          style={styles.menuItem}
        />
        <MenuItem
          title={CNPBSH}
          accessoryRight={() => (
            <Toggle key="Toggle4" checked={voice2} onChange={changeVoice2} />
          )}
          style={styles.menuItem}
        />

        <MenuItem
          title={NMQKWY}
          accessoryRight={ForwardIcon}
          style={styles.bottom}
          onPress={() => {
            navigation.navigate("MyRecord");
          }}
        />
      </>
    );
}