import React from 'react';
import { useTranslation } from 'react-i18next';
import { StyleSheet, 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';
import { Checkbox } from 'react-native-paper';

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>
      <Checkbox
        // trackColor={{ false: '#767577', true: '#81b0ff' }}
        // thumbColor={deleteAfterUpload ? 'tomato' : '#f4f3f4'}
        // ios_backgroundColor='#3e3e3e'
        onPress={() => {
          logImEXEvent('imexmobile_toggle_delete_after_upload');
          toggleDeleteAfterUpload();
        }}
        status={deleteAfterUpload ? 'checked' : 'unchecked'}
      />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    margin: 10,
  },

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