import React, { Component } from 'react';
import { View, Text, TouchableOpacity, BackHandler } from 'react-native';
import styles from './styles/BookRequestDetailsStyle';
import { Container, Content, Header } from '../../../components';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import {
  getBookRequestStatus,
  getBookRequestColor
} from './../../../libs/Utils';
import {
  showEditModalRequest,
  showDeleteModalRequest
} from './../../../actions';

export interface Props {
  navigation: any;
  bookRequestDetails: any;
  showEditModal: any;
  showDeleteModal: any;
}
interface State {
  Selected?: any;
  status?: boolean;
  checked: any;
}
class BookRequestDetails extends Component<Props, State> {
  constructor(props: any) {
    super(props);
    this.state = {
      status: false,
      Selected: '',
      checked: 0
    };
  }

  componentDidMount = () => {
    BackHandler.addEventListener('hardwareBackPress', this.backHandler);
  };

  componentWillUnmount = () => {
    BackHandler.removeEventListener('hardwareBackPress', this.backHandler);
  };

  backHandler = () => {
    const { navigation } = this.props;
    return navigation.goBack();
  };

  render() {
    const {
      navigation,
      bookRequestDetails,
      showEditModal,
      showDeleteModal
    } = this.props;
    return (
      <Container transparentStatusBar safeAreaView={false}>
        <Content>
          <Header
            title={'Book Request'}
            hasBackBtn
            isWhiteBackBtn
            navigation={navigation}
          />
          <View style={styles.bookDetailsInnerContainer}>
            <View style={styles.bookDetailsItem}>
              <Text style={styles.bookDetailsLabel}>Book Name:</Text>
              <Text style={styles.bookDetailsValue}>
                {bookRequestDetails.book_name}
              </Text>
            </View>

            <View style={styles.bookDetailsItem}>
              <Text style={styles.bookDetailsLabel}>ISBN No.:</Text>
              <Text style={styles.bookDetailsValue}>
                {bookRequestDetails.isbn}
              </Text>
            </View>

            <View style={styles.bookDetailsItem}>
              <Text style={styles.bookDetailsLabel}>Edition:</Text>
              <Text style={styles.bookDetailsValue}>
                {bookRequestDetails.edition}
              </Text>
            </View>

            <View style={styles.bookDetailsItem}>
              <Text style={styles.bookDetailsLabel}>Format:</Text>
              <Text style={styles.bookDetailsValue}>
                {bookRequestDetails.format === 1
                  ? 'Hardcover'
                  : bookRequestDetails.format === 2
                  ? 'Paperback'
                  : '-'}
              </Text>
            </View>

            <View style={styles.bookDetailsItem}>
              <Text style={styles.bookDetailsLabel}>Status:</Text>
              <Text
                style={[
                  styles.bookDetailsValue,
                  { color: getBookRequestColor(bookRequestDetails.status) }
                ]}>
                {getBookRequestStatus(bookRequestDetails.status)}
              </Text>
            </View>

            <View style={styles.buttonContainer}>
              <TouchableOpacity
                style={styles.editBtn}
                onPress={() => {
                  navigation.goBack();
                  showEditModal();
                }}>
                <Text style={styles.btnTxt}>Edit</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.deleteBtn}
                onPress={() => {
                  navigation.goBack();
                  showDeleteModal();
                }}>
                <Text style={styles.btnTxt}>Delete</Text>
              </TouchableOpacity>
            </View>
          </View>
        </Content>
      </Container>
    );
  }
}

function mapStateToProps({ book }: any) {
  return {
    bookRequestDetails: book.bookRequestDetails || {},
    loading: book.loading || false
  };
}

function mapDispatchToProps(dispatch: any) {
  return bindActionCreators(
    {
      showEditModal: showEditModalRequest,
      showDeleteModal: showDeleteModalRequest
    },
    dispatch
  );
}

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