import React from 'react';
import {
  SafeAreaView,
  Text,
  View,
  TouchableOpacity,
  Image,
  ScrollView,
  Keyboard,
  TouchableWithoutFeedback,
  StyleSheet,
  TextInput,
  RefreshControl,
} from 'react-native';
var _ = require('lodash');
import {inject, observer} from 'mobx-react';
import {observable} from 'mobx';
import TitleBar from '../../components/titleBar';
import {images} from '../../assets/images/imageIndex';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import CheckAnimate from '../../components/checkAnimate';
import moment from 'moment';
import {width, height} from '../../services/screen';
import Loading from '../../components/Loading';
import {colors} from '../../assets/styles/colors-theme';
import Toast, {DURATION} from 'react-native-easy-toast';
import Icon from 'react-native-vector-icons/dist/MaterialCommunityIcons';
import IonIcon from 'react-native-vector-icons/dist/Ionicons';
import CustomTextInput from '../../components/customTextInput';
import CustomLoginButton from '../../components/customLoginButton';

Icon.loadFont();
@inject('appStore')
@observer
export default class RedeemRecord extends React.Component {
  constructor(props) {
    super(props);
    this.store = props.appStore;
  }

  componentDidMount() {
    this._unsubscribe = this.props.navigation.addListener('focus', () => {
      this.store.getRedeemHistory();
    });
  }

  componentWillUnmount() {
    this._unsubscribe();
   // this.store.getOrders();
  }

  paymentMethodStringReturn(value) {
    switch (value) {
      case 'COD':
        return this.store.text.cashOnDelivery;
        break;
      case 'Credit Card':
        return this.store.text.creditCard;
        break;
      default:
        return value;
        break;
    }
  }

  shippingMethodHandler(type) {
    switch (type) {
      case 0:
        return '門市自取';
        break;
      case 1:
        return '送到上門';
        break;
      case '3':
        return '送到上門';
        break;
    }
  }

  statusHandler(text) {
    const lang = this.store.text;
    switch (text) {
      case 'PC':
        return lang.pc;
        break;
      case 'PP':
        return lang.pp;
        break;
      case 'PRV':
        return lang.prv;
        break;
      case 'PRJ':
        return lang.prj;
        break;
      case 'PA':
        return lang.pa;
        break;
      case 'ARV':
        return lang.arv;
        break;
      case 'FIN':
        return lang.fin;
        break;
      case 'CAN':
        return lang.can;
        break;
      case 'EXP':
        return lang.exp;
        break;
    }
  }

  shippingFeeHandler(items) {
    if (items.hasOwnProperty('shoppingGroup')) {
      if (items.status == 'PC') {
        return '待截單';
      }else{
        return this.store.priceFormatReturn(items.shippingFee);
      }
    } else {
      return this.store.priceFormatReturn(items.shippingFee);
    }
  }

  OrderList() {
    var redeemRecord = this.store.redeemHistory.sort((a, b) => {
      return b.created - a.created;
    });
    if (redeemRecord.length > 0) {
      return redeemRecord.map((items, index) => {
        return this.renderList(items);
      });
    } else {
      return <View></View>;
    }
  }

  productsList(items) {
    console.log(items);
    if (items.hasOwnProperty('items')) {
      return items.items.map((itemsData, itemsIndex) => {
        if (itemsIndex < 2) {
          return (
            <Text
              style={{fontSize: 11, marginLeft: 10, marginTop: 2}}
              numberOfLines={1}>
              {itemsIndex == 1 && items.items.length > 2
                ? itemsData.name + 'x' + itemsData.qty + '...'
                : itemsData.name + 'x' + itemsData.qty}
            </Text>
          );
        }
      });
    } else {
      return <View />;
    }
  }
  renderDot(items) {
    if (items.hasOwnProperty('line_items')) {
      if (items.line_items.length > 4) {
        return <Icon name="dots-vertical" color="gray" />;
      } else {
        return <View />;
      }
    }
  }
  renderList(items) {
    return (
      <View
        style={{
          width: width - 40,
          marginTop: 15,
          marginLeft: 20,
          marginRight: 20,
          alignItems: 'center',
        }}
    >
        <View style={{width: width - 40, flexDirection: 'row'}}>
          <View
            style={{
              flex: 0.5,
              justifyContent: 'center',
            }}>
            <Text
              style={{
                fontSize: 11,
                marginLeft: 10,
                fontWeight: 'bold',
              }}
              numberOfLines={1}>
              {this.store.text.orderNumber + ' ： ' + items.id}
            </Text>
            <Text
              style={{
                fontSize: 11,
                marginLeft: 10,
                color: colors.labelColor,
              }}
              numberOfLines={1}>
              {moment(items.created).format('hh:mm DD-MM-YYYY')}
            </Text>
          </View>
          <View
            style={{
              flex: 0.25,
              justifyContent: 'center',
            }}>
 
          </View>
          <View
            style={{
              flex: 0.25,
              justifyContent: 'center',
            }}>
            <Text
              style={{
                fontSize: 11,
                marginLeft: 10,
                color: colors.labelColor,
              }}>
              {this.store.text.usePoints}
            </Text>
            <Text
              style={{
                fontSize: 11,
                marginLeft: 10,
                fontWeight: '800',
              }}>
              {items.totalPrice}
            </Text>
          </View>
        </View>
        <View
          style={{
            width: width - 40,
            marginTop: 10,
            flexDirection: 'row',
          }}>
          <View style={{flex: 0.7}}>
            {this.productsList(items)}
            {/* {this.renderDot(items)} */}
          </View>
          <View
            style={{
              flex: 0.2,
              alignItems: 'flex-end',
              justifyContent: 'center',
            }}>
            <Text
              style={{
                fontSize: 14,
                color: colors.mainColor,
              }}>
              {this.statusHandler(items.status)}
            </Text>
          </View>
          <View
            style={{
              flex: 0.1,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Icon name={'chevron-right'} size={20} />
          </View>
        </View>
        <View
          style={{
            marginTop: 10,
            marginLeft: 20,
            backgroundColor: colors.line2Color,
            width: width - 20,
            height: 1,
          }}
        />
      </View>
    );
  }

  render() {
    return (
      <SafeAreaView
        style={{
          flex: 1,
          backgroundColor: colors.bgc,
        }}>
        <View style={{flex: 1}}>
          <Loading loading={this.store.loading} />
          <TitleBar
            self={this}
            showSearch={false}
            showBack={true}
            title={this.store.text.redeemRecord}
          />

          <ScrollView
            style={{flex: 1, marginBottom: 10}}
            refreshControl={
              <RefreshControl
                refreshing={this.store.loading}
                onRefresh={() => this.store.getOrders()}
              />
            }>
            {this.OrderList()}
          </ScrollView>
        </View>
      </SafeAreaView>
    );
  }
}
const styles = StyleSheet.flatten({
  textStyle: {
    fontSize: 11,
    color: colors.mainColor,
  },
});
