import SignOutButton from "@/components-old/sign-out-button/sign-out-button.component";
import { toggleDeleteAfterUpload } from "@/redux/app/app.actions";
import { selectDeleteAfterUpload } from "@/redux/app/app.selectors";
import { selectBodyshop } from "@/redux/user/user.selectors";
import { formatBytes } from "@/util/uploadUtils";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { StyleSheet, View } from "react-native";
import { Button, Divider, Text } from "react-native-paper";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import UploadDeleteSwitch from "./upload-delete-switch";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  deleteAfterUpload: selectDeleteAfterUpload,
});

const mapDispatchToProps = (dispatch) => ({
  toggleDeleteAfterUpload: () => dispatch(toggleDeleteAfterUpload()),
});
export default connect(mapStateToProps, mapDispatchToProps)(Tab);

function Tab({ bodyshop, deleteAfterUpload, toggleDeleteAfterUpload }) {
  return (
    <View style={styles.container}>
      <Text variant="titleLarge">Settings</Text>
      <Text>
        Media Storage:{" "}
        {bodyshop?.uselocalmediaserver
          ? bodyshop.localmediaserverhttp
          : "Cloud"}
      </Text>
      {!bodyshop?.uselocalmediaserver && (
        <Text>Job Size Limit: {formatBytes(bodyshop?.jobsizelimit)}</Text>
      )}
      <UploadDeleteSwitch />
      <Button
        onPress={() => {
          AsyncStorage.removeItem("persist:root");
        }}
      >
        Clear Storage
      </Button>
      <Divider />
      <SignOutButton />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});