import React from 'react';
import { View, Text, BackHandler } from 'react-native';
import styles from './Styles/BookDetailsStyle';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import {
  Header,
  Container,
  Content,
  Button,
  Loader,
  ImageX
} from '../../../components';
import { Colors } from './../../../theme';
import { ApiConfig } from './../../../config';
import {
  bookReserveRequest,
  bookUnreserveRequest,
  changeBookStatusRequest
} from './../../../actions';
import dayjs from 'dayjs';

interface State {
  selected?: any;
  status?: boolean;
  book: any;
  setCurrentTime?: any;
}
export interface Props {
  navigation: any;
  selected: any;
  bookReserve: any;
  bookUnreserve: any;
  loading: any;
  changeBookStatus: any;
}

class BookDetails extends React.Component<Props, State> {
  constructor(props: any) {
    super(props);
    this.state = {
      book: props.navigation.state.params.item,
      setCurrentTime: props.navigation.state.params.setCurrentTime
    };
  }

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

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

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

  getColor = (status: any) => {
    let color = '';
    switch (status) {
      case 1:
        color = '#00802b';
        break;
      case 2:
        color = '#ff6666';
        break;
    }
    return color;
  };

  changeBookStatus = (status: any, id: any) => {
    const { bookReserve, bookUnreserve } = this.props;
    const { setCurrentTime } = this.state;
    if (status === 'reserve') {
      bookReserve(id, setCurrentTime);
    } else {
      bookUnreserve(id, setCurrentTime);
    }
  };

  render() {
    const { book } = this.state;
    const { navigation, loading } = this.props;
    return (
      <>
        <Container transparentStatusBar safeAreaView={false}>
          <Content>
            <Header
              hasPaddingTopForBookDetails
              title={'Book Details'}
              hasPaddingTopForBookDetailsIcon
              hasBackBtn
              isWhiteBackBtn
              navigation={navigation}>
              <ImageX
                source={{ uri: ApiConfig.IMG_URL + book.id + '.jpg' }}
                defaultText={book.name.charAt(0)}
                defaultTextStyle={styles.defaultText}
                style={styles.itemImage}
              />
            </Header>

            <View style={styles.bookDetails}>
              <Text style={styles.bookTitle}>{book.name}</Text>

              <View style={styles.bookDetailsInnerContainer}>
                <View style={styles.bookDetailsItem}>
                  <Text style={styles.bookDetailsLabel}>Book Code:</Text>
                  <Text style={styles.bookDetailsValue}>{book.book_code}</Text>
                </View>

                <View style={styles.bookDetailsItem}>
                  <Text style={styles.bookDetailsLabel}>Auther Name:</Text>
                  <Text style={styles.bookDetailsValue}>{book.authors}</Text>
                </View>

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

                <View style={styles.bookDetailsItem}>
                  <Text style={styles.bookDetailsLabel}>Language:</Text>
                  <Text style={styles.bookDetailsValue}>
                    {book.language_name}
                  </Text>
                </View>

                <View style={styles.bookDetailsItem}>
                  <Text style={styles.bookDetailsLabel}>Status:</Text>
                  <Text
                    style={[
                      styles.bookDetailsValue,
                      { color: this.getColor(book.status) }
                    ]}>
                    {book.status === 1 ? 'Available' : 'Not Available'}
                  </Text>
                </View>
                <View style={styles.bookDetailsItem}>
                  <Text style={styles.bookDetailsLabel}>
                    Expected Avail. Date:
                  </Text>
                  <Text style={styles.bookDetailsValue}>
                    {!!book.expected_available_date &&
                      dayjs(book.expected_available_date).format(
                        'Do MMM, YYYY'
                      )}
                  </Text>
                </View>

                {book.status === 1 && (
                  <Button
                    title={'Reserve'}
                    hasShadow
                    buttonColor={Colors.green}
                    shadowColor={Colors.green}
                    shadowRadius={20}
                    shadowBorder={10}
                    shadowOpacity={0.3}
                    style={styles.marginTop}
                    onPress={() => this.changeBookStatus('reserve', book.id)}
                  />
                )}

                {book.is_reserved && (
                  <Button
                    title={'Unreserve'}
                    hasShadow
                    buttonColor={Colors.red}
                    shadowColor={Colors.red}
                    shadowRadius={20}
                    shadowBorder={10}
                    shadowOpacity={0.3}
                    style={styles.marginTop}
                    onPress={() => this.changeBookStatus('unreserve', book.id)}
                  />
                )}
              </View>
            </View>
          </Content>
        </Container>
        <Loader show={loading} />
      </>
    );
  }
}

function mapStateToProps({ book }: any) {
  return {
    loading: book.loading
  };
}

function mapDispatchToProps(dispatch: any) {
  return bindActionCreators(
    {
      bookReserve: bookReserveRequest,
      bookUnreserve: bookUnreserveRequest,
      changeBookStatus: changeBookStatusRequest
    },
    dispatch
  );
}

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