import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import SelectSettingItem from "./SelectSettingItem";
import AboutUs from "./AboutUs";
import BannedList from "./BannedList";
import EditPassword from "./EditPassword";
import Feedback from "./Feedback";
import { Icon } from "@rneui/themed";

const SettingStack = createNativeStackNavigator();

export default function Setting() {
  return (
    <SettingStack.Navigator>
      <SettingStack.Screen
        name="SelectSettingItem"
        component={SelectSettingItem}
        options={({ navigation }) => ({
          headerLeft: () => (
            <Icon
              type="ionicon"
              name="chevron-back"
              size={32}
              color="white"
              onPress={() => navigation.goBack()}
            />
          ),
          title: "设置",
          headerTitleStyle: { color: "white" },
          headerStyle: { backgroundColor: "#07050A" },
        })}
      />
      <SettingStack.Screen
        name="AboutUs"
        component={AboutUs}
        options={({ navigation }) => ({
          headerLeft: () => (
            <Icon
              type="ionicon"
              name="chevron-back"
              size={32}
              color="white"
              onPress={() => navigation.goBack()}
            />
          ),
          title: "关于我们",
          headerTitleStyle: { color: "white" },
          headerStyle: { backgroundColor: "#07050A" },
        })}
      />
      <SettingStack.Screen
        name="BannedList"
        component={BannedList}
        options={({ navigation }) => ({
          headerLeft: () => (
            <Icon
              type="ionicon"
              name="chevron-back"
              size={32}
              color="white"
              onPress={() => navigation.goBack()}
            />
          ),
          title: "黑名单",
          headerTitleStyle: { color: "white" },
          headerStyle: { backgroundColor: "#07050A" },
        })}
      />
      <SettingStack.Screen
        name="EditPassword"
        component={EditPassword}
        options={({ navigation }) => ({
          headerLeft: () => (
            <Icon
              type="ionicon"
              name="chevron-back"
              size={32}
              color="white"
              onPress={() => navigation.goBack()}
            />
          ),
          headerTransparent: true,
          title: "",
          headerTitleStyle: { color: "white" },
          headerStyle: { backgroundColor: "#07050A" },
        })}
      />
      <SettingStack.Screen
        name="Feedback"
        component={Feedback}
        options={({ navigation }) => ({
          headerLeft: () => (
            <Icon
              type="ionicon"
              name="chevron-back"
              size={32}
              color="white"
              onPress={() => navigation.goBack()}
            />
          ),
          title: "意见反馈",
          headerTitleStyle: { color: "white" },
          headerStyle: { backgroundColor: "#07050A" },
        })}
      />
    </SettingStack.Navigator>
  );
}
