import React from "react";
import { Platform, Switch } from "react-native";
//import { Switch } from "react-native-paper";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { toggleDeleteAfterUpload } from "../../redux/app/app.actions";
import { selectDeleteAfterUpload } from "../../redux/app/app.selectors";

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

const mapDispatchToProps = (dispatch) => ({
  toggleDeleteAfterUpload: () => dispatch(toggleDeleteAfterUpload()),
});

export function UploadDeleteSwitch({
  deleteAfterUpload,
  toggleDeleteAfterUpload,
}) {
  //Required workaround to prevent double-tap issue.
  const [state, setState] = React.useState(deleteAfterUpload);

  return (
    <Switch
      onValueChange={() => {
        setState(!state);
        toggleDeleteAfterUpload();
      }}
      value={Platform.OS === "android" ? false : state}
      disabled={Platform.OS === "android"}
    />
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(UploadDeleteSwitch);