component.js

import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { StyleSheet, View, Alert, KeyboardAvoidingView } from "react-native";

import {
  Container,
  Content,
  Text,
  Button,
  Icon,
  Input,
  Card,
  CardItem,
  Form,
  Item,
  Label,
  Accordion,
  List,
  ListItem,
  Textarea,
  CheckBox,
  Footer,
  FooterTab,
  Body
} from "native-base";
import { RadioGroup, RadioButton } from "react-native-flexi-radio-button";
import _ from "lodash";
import { isTablet } from "react-native-device-detection";
import { IntellicentricsThumbnail } from "../components/Logo";
import {
  requestRepscoreEvents,
  submitRepscoreEvent
} from "../actions/REPScoreEvents";
import { Loading } from "../components/Loading";

class REPScoreEvents extends React.PureComponent {
  static navigationOptions = ({ navigation }) => ({
    title: "Add REPScore",

    gesturesEnabled: false,
    headerStyle: { backgroundColor: "#769654" },
    headerTintColor: "white",
    headerLeft: (
      <Button
        transparent
        onPress={() => {
          navigation.goBack();
        }}
      >
        <Icon name="ios-arrow-back" color="#FFF" />
      </Button>
    ),
    headerRight: <IntellicentricsThumbnail />
  });

  static propTypes = {
    navigation: PropTypes.object,
    pickedFacilityID: PropTypes.string,
    pickedFacilityName: PropTypes.string,
    showLoading: PropTypes.bool,
    errorMsg: PropTypes.string,
    eventTypes: PropTypes.object,
    dispatch: PropTypes.func,
    user_id: PropTypes.string,
    successmsg: PropTypes.string
  };

  constructor(props) {
    super(props);
    this.state = {
      type_name: "",
      type_id: "",
      eventNotes: "",
      exact: false,
      isButtonDisabled: true,
      isButtonPrimary: false,
      eventNotesText: ""
    };
  }

  componentDidMount() {
    this.props.dispatch(requestRepscoreEvents());
  }

  componentDidUpdate(prevProps) {
    if (prevProps.successmsg === "" && this.props.successmsg !== "") {
      Alert.alert(
        "Success",
        this.props.successmsg,
        [
          {
            text: "OK",
            onPress: () => {
              this.props.navigation.goBack();
            }
          }
        ],
        { cancelable: false }
      );
    }
    if (prevProps.errorMsg === "" && this.props.errorMsg !== "") {
      Alert.alert(
        "Error",
        this.props.errorMsg,
        [
          {
            text: "OK",
            onPress: () => {
              this.props.navigation.goBack();
            }
          }
        ],
        { cancelable: false }
      );
    }
  }

 
  onSelect = (index, value) => {
    this.setState({ eventNotesText: "" });

    this.props.navigation.navigate("REPScoreEventDetails", {
      selectedvalue: value,
      returnData: this.returnData.bind(this)
    });
  };

  returnData = data => {
    this.setState({
      type_name: data.type_name,
      type_id: data.type_id
    });
  };
  tabletViewRadioButton = () => (
    <View style={styles.container}>
      <RadioGroup
        onSelect={(index, value) => this.onSelect(index, value)}
        style={{ flex: 1, flexDirection: "row" }}
      >
        <RadioButton value="positive">
          <Text>Positive Event</Text>
        </RadioButton>

        <RadioButton value="negative">
          <Text>Negative Event</Text>
        </RadioButton>
      </RadioGroup>
    </View>
  );
  phoneViewRadioButton = () => (
    <View style={styles.container}>
      <RadioGroup onSelect={(index, value) => this.onSelect(index, value)}>
        <RadioButton value="positive">
          <Text>Positive Event</Text>
        </RadioButton>

        <RadioButton value="negative">
          <Text>Negative Event</Text>
        </RadioButton>
      </RadioGroup>
    </View>
  );

  tabletViewEventSelection = () => (
    <Form>
      <Item fixedLabel>
        <Label>Select event description</Label>
      </Item>
    </Form>
  );
  phoneViewEventSelection = () => (
    <Item>
      <Input placeholder="select Event Description" />
      <Icon active name="swap" />
    </Item>
  );

  handleEventNotesChange = text => {
    this.setState({ eventNotes: text });
    if (text !== "") {
      this.setState({
        isButtonDisabled: false,
        isButtonPrimary: true
      });
    } else if (text === "") {
      this.setState({
        isButtonDisabled: true,
        isButtonPrimary: false
      });
    }
  };

  eventOutstandingChoicePressed = () => {
    if (this.state.exact) {
      this.setState({ exact: false });
    } else {
      this.setState({ exact: true });
    }
  };

  handleAddRepScoreEvent = () => {
    const REPScoreEventDetails = {
      user_id: this.props.user_id,
      facility_id: this.props.pickedFacilityID,
      event_type_id: this.state.type_id,
      event_note: this.state.eventNotes,
      reqs: this.state.exact
    };
    this.props.dispatch(submitRepscoreEvent(REPScoreEventDetails));
  };
  render() {
    console.log("the render method");
    let eventDescriptionView;
    let eventNotesView;
    let eventOutstandingChoice;

    if (this.state.type_name !== "") {
      eventDescriptionView = (
        <Card>
          <CardItem header bordered>
            <Text>Event Description</Text>
          </CardItem>
          <CardItem>
            <Text>{this.state.type_name}</Text>
          </CardItem>
        </Card>
      );

      eventNotesView = (
        <Card>
          <CardItem header bordered style={{ flexDirection: "column" }}>
            <Text style={{ alignSelf: "flex-start" }}>Event Notes</Text>
            <Textarea
              value={this.state.eventNotesText}
              rowSpan={3}
              bordered
              placeholder="Event Notes"
              style={{ alignSelf: "stretch" }}
              onChangeText={this.handleEventNotesChange}
            />
          </CardItem>
        </Card>
      );
    }

    if (this.state.eventNotes !== "") {
      eventOutstandingChoice = (
        <List>
          <ListItem>
            <CheckBox
              checked={this.state.exact}
              onPress={this.eventOutstandingChoicePressed}
            />
            <Body>
              <Text>Include Outstanding Requirements</Text>
            </Body>
          </ListItem>
        </List>
      );
    }

    return (
      <Container style={styles.container}>
        <Content>
          <KeyboardAvoidingView behavior="padding">
            <Card>
              <CardItem>
                <Body>
                  <Text style={{ alignSelf: "center" }}>
                    {this.props.pickedFacilityName}
                  </Text>
                </Body>
              </CardItem>
            </Card>
            <Card>
              <CardItem header bordered>
                <Body>
                  <Text>Event Type</Text>
                </Body>
              </CardItem>
              <CardItem>
                {isTablet
                  ? this.tabletViewRadioButton()
                  : this.phoneViewRadioButton()}
              </CardItem>
            </Card>
            {eventDescriptionView}
            {eventNotesView}
            {eventOutstandingChoice}
            <View>
              <Button
                block
                disabled={this.state.isButtonDisabled}
                success={this.state.isButtonPrimary}
                onPress={this.handleAddRepScoreEvent}
              >
                <Text style={{ color: "#FFF", fontSize: 16 }}>
                  Add REPScore Event
                </Text>
              </Button>
            </View>
          </KeyboardAvoidingView>
        </Content>

        {this.props.showLoading ? <Loading /> : null}
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    flex: 1,
    margin: 5,
    backgroundColor: "#FFF"
  },

  header: {
    backgroundColor: "#769654"
  }
});
const mapStateToProps = state => ({
  pickedFacilityID: state.pickFacility.pickedFacilityID,
  pickedFacilityName: state.pickFacility.pickedFacilityName,
  showLoading: state.REPScoreEvents.showLoading,
  eventTypes: state.REPScoreEvents.eventTypes,
  errorMsg: state.REPScoreEvents.errorMsg,
  user_id: state.repProfile.repsProfile.user_id,
  successmsg: state.REPScoreEvents.successmsg
});

export default connect(mapStateToProps)(REPScoreEvents);