import React from "react";
import { View, Text, Button } from "react-native";
import { createStructuredSelector } from "reselect";

import {
  selectBodyshop,
  selectCurrentUser,
} from "../redux/user/user.selectors";
import { emailSignInStart, signOutStart } from "../redux/user/user.actions";
import { connect } from "react-redux";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  currentUser: selectCurrentUser,
});

const mapDispatchToProps = (dispatch) => ({
  emailSignInStart: (email, password) =>
    dispatch(emailSignInStart({ email, password })),
  signOutStart: () => dispatch(signOutStart()),
});

export function SignIn({
  bodyshop,
  currentUser,
  emailSignInStart,
  signOutStart,
}) {
  return (
    <View>
      <Text>The secondary view</Text>
      <Text>{JSON.stringify(currentUser)}</Text>
      <Button title="Testing." onPress={() => console.log("test")} />
      <Button
        title="Sign In"
        onPress={() => emailSignInStart("patrick@imex.dev", "patrick")}
      />
      <Button title="Sign Out" onPress={() => signOutStart()} />
    </View>
  );
}

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