import React, { Component } from 'react';
import {
  View,
  TextInput,
  TouchableOpacity,
  Text,
  BackHandler
} from 'react-native';
import styles from './Styles/BookHistoryDetailsStyle';
import Header from '../../../components/Header';
import Colors from '../../../theme/Colors';
import { Container, Content, Loader, ImageX } from './../../../components';
import { bookUnreserveRequest } from './../../../actions';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import dayjs from 'dayjs';
import advancedFormat from 'dayjs/plugin/advancedFormat';
import { ApiConfig } from './../../../config';
dayjs.extend(advancedFormat);

export interface Props {
  navigation: any;
  bookHistoryDetails: any;
  bookUnreserve: any;
  setCurrentTime: any;
  loading: any;
}
interface State {
  status?: boolean;
}

class BookHistoryDetails extends Component<Props, State> {
  constructor(props: any) {
    super(props);
    this.state = {
      status: false
    };
  }

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

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

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

  getStatus = (statusKey: any) => {
    let status = '';
    switch (statusKey) {
      case 1: //Reserved
        status = 'Reserved';
        break;
      case 2: //Issued
        status = 'Issued';
        break;
      case 3: //Returned
        status = 'Returned';
        break;
      case 4: //Unknown
        status = 'Unknown';
        break;
      case 5: //Unreserved
        status = 'Unreserved';
        break;
      case 6: //Lost
        status = 'Lost';
        break;
      case 7: //Damaged
        status = 'Damaged';
        break;
      default:
        status = 'Unknown';
        break;
    }
    return status;
  };

  getColor = (status: any) => {
    let color = '';
    switch (status) {
      case 1: //Reserved
        color = Colors.skyblue;
        break;
      case 2: //Issued
        color = Colors.green;
        break;
      case 3: //Returned
        color = Colors.black;
        break;
      case 4: //Unknown
        color = Colors.black;
        break;
      case 5: //Unreserved
        color = Colors.skyblue;
        break;
      case 6: //Lost
        color = Colors.red;
        break;
      case 7: //Damaged
        color = Colors.yellow;
        break;
      default:
        color = Colors.black;
        break;
    }
    return color;
  };

  renderItem = () => {
    const { bookHistoryDetails } = this.props;
    return (
      <View style={styles.bookItem}>
        <ImageX
          source={{ uri: ApiConfig.IMG_URL + bookHistoryDetails.image }}
          defaultText={
            (bookHistoryDetails.book_name &&
              bookHistoryDetails.book_name.charAt(0)) ||
            '-'
          }
          style={styles.itemImg}
        />
        <View style={styles.itemDetails}>
          <Text style={styles.itemTitle} numberOfLines={2}>
            {bookHistoryDetails.book_name || '-'}
          </Text>
          <View style={styles.flexDirection}>
            <Text style={styles.itemBookIdTitle}>Book Code : </Text>
            <Text style={styles.itemSubTitle}>
              {bookHistoryDetails.book_code}
            </Text>
          </View>
          <Text
            style={[
              styles.statusTxt,
              { color: this.getColor(bookHistoryDetails.status) }
            ]}>
            {this.getStatus(bookHistoryDetails.status)}
          </Text>
        </View>
      </View>
    );
  };

  render() {
    const {
      navigation,
      bookHistoryDetails,
      bookUnreserve,
      setCurrentTime,
      loading
    } = this.props;
  return (
      <>
        <Container transparentStatusBar safeAreaView={false}>
          <Content>
            <Header
              title={'Book History'}
              hasBackBtn
              isWhiteBackBtn
              navigation={navigation}
            />

            {this.renderItem()}

            <View style={styles.bookDetailsInnerContainer}>
              <View style={styles.bookDetailsItem}>
                <Text style={styles.bookDetailsLabel}>Issue Date:</Text>
                <Text style={styles.bookDetailsValue}>
                  {(bookHistoryDetails.issue_date &&
                    dayjs(bookHistoryDetails.issue_date).format(
                      'Do MMM, YYYY'
                    )) ||
                    '-'}
                </Text>
              </View>

              <View style={styles.bookDetailsItem}>
                <Text style={styles.bookDetailsLabel}>Issue Due Date:</Text>
                <Text style={styles.bookDetailsValue}>
                  {(bookHistoryDetails.issue_due_date &&
                    dayjs(bookHistoryDetails.issue_due_date).format(
                      'Do MMM, YYYY'
                    )) ||
                    '-'}
                </Text>
              </View>

              <View style={styles.bookDetailsItem}>
                <Text style={styles.bookDetailsLabel}>Reserve Date:</Text>
                <Text style={styles.bookDetailsValue}>
                  {(bookHistoryDetails.reserve_date &&
                    dayjs(bookHistoryDetails.reserve_date).format(
                      'Do MMM, YYYY'
                    )) ||
                    '-'}
                </Text>
              </View>

              <View style={styles.bookDetailsItem}>
                <Text style={styles.bookDetailsLabel}>Return Date:</Text>
                <Text style={styles.bookDetailsValue}>
                  {(bookHistoryDetails.return_date &&
                    dayjs(bookHistoryDetails.return_date).format(
                      'Do MMM, YYYY'
                    )) ||
                    '-'}
                </Text>
              </View>

              <View style={styles.bookDetailsItem}>
                <Text style={styles.bookDetailsLabel}>Return Due Date:</Text>
                <Text style={styles.bookDetailsValue}>
                  {(bookHistoryDetails.return_due_date &&
                    dayjs(bookHistoryDetails.return_due_date).format(
                      'Do MMM, YYYY'
                    )) ||
                    '-'}
                </Text>
              </View>

              {bookHistoryDetails.status === 1 && (
                <TouchableOpacity
                  onPress={() =>
                    bookUnreserve(
                      bookHistoryDetails.book_item_id,
                      setCurrentTime,
                      'historyDetails'
                    )
                  }
                  style={styles.reserveBtn}>
                  <Text style={styles.reserveTxt}>Unreserve</Text>
                </TouchableOpacity>
              )}
            </View>
          </Content>
        </Container>
        <Loader show={loading} />
      </>
    );
  }
}

function mapStateToProps({ book }: any) {
  return {
    loading: book.loading,
    bookHistoryDetails: book.bookHistoryDetails,
    setCurrentTime: book.setCurrentTime || null
  };
}

function mapDispatchToProps(dispatch: any) {
  return bindActionCreators(
    {
      bookUnreserve: bookUnreserveRequest
    },
    dispatch
  );
}

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