import React from "react";
import { useTranslation } from "react-i18next";
import { StyleSheet, Switch, Text, View } from "react-native";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.analytics";
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,
}) {
  const { t } = useTranslation();

  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        {t("mediabrowser.labels.deleteafterupload")}
      </Text>
      <Switch
        trackColor={{ false: "#767577", true: "#81b0ff" }}
        thumbColor={deleteAfterUpload ? "tomato" : "#f4f3f4"}
        ios_backgroundColor="#3e3e3e"
        onValueChange={() => {
          logImEXEvent("imexmobile_toggle_delete_after_upload");
          toggleDeleteAfterUpload();
        }}
        value={deleteAfterUpload}
      />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    margin: 10,
  },

  text: {
    flex: 1,
  },
});
export default connect(mapStateToProps, mapDispatchToProps)(UploadDeleteSwitch);
