import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  TextInput,
  ScrollView,
  Alert,
  Image,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome5';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import RadioForm, {
  RadioButton,
  RadioButtonInput,
  RadioButtonLabel,
} from 'react-native-simple-radio-button';
import {initialMode} from 'react-native-dark-mode';
import ImagePicker from 'react-native-image-crop-picker';
import Toast, {DURATION} from 'react-native-easy-toast';
import LoadingView from '../../common/loading';
import BackHeader from '../../components/backHeader';
import Picker from 'react-native-picker-js';
import Modal, {ModalContent} from 'react-native-modals';
import {colors} from '../../assets/styles/colors-theme';
import CheckAnimate from '../../common/checkAnimate';
import history from '../../common/history';
import NaviBar from '../../components/navi-bar';
import Migrations from '../../services/realm/Mirgrations';
import {Avatar} from 'react-native-elements';
import moment from 'moment';
import {inject, observer} from 'mobx-react';
import RNPickerSelect from 'react-native-picker-select';
import {Fonts} from '../../assets/styles/fonts-theme';
import DeviceInfo from 'react-native-device-info';
import {observable} from 'mobx';
import CountryPicker, {
  getAllCountries,
} from 'react-native-country-picker-modal';
import DateTimePicker from 'react-native-modal-datetime-picker';
import IconTextInput from '../../components/iconTextInput';
import CommonTextInput from '../../components/commonTextInput';
import {queryUser} from '../../services/realm/realmManger';
import {width, height} from '../../common/screen';
import {scale, verticalScale, moderateScale} from 'react-native-size-matters';
import Size from '../../common/size';

const size = new Size();
// const formatter = new Intl.NumberFormat('en-US', {
//   style: 'currency',
//   currency: 'HKD',
//   minimumFractionDigits: 0,
// });

@inject('appStore')
@observer
export default class ServicePayment extends Component {
  @observable
  paymentseletion = [
    {label: 'Visa   ' + this.store.creditCardinfo.num, value: 0},
    {label: 'Alipay', value: 1},
  ];

  @observable
  paid = this.props.navigation.state.params.paid;
  @observable
  data = this.props.navigation.state.params.data;

  @observable
  paymentSelected = 0;

  constructor(props) {
    super(props);
    this.store = props.appStore;
  }
  componentDidMount() {
    console.log(this.paid);
  }

  alipayPayAsk(navigation) {
    Alert.alert(
      '',
      '付款成功?',
      [
        {
          text: '還沒有',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel',
        },
        {
          text: '成功',
          onPress: () => navigation.popToTop(),
        },
      ],
      {cancelable: false},
    );
  }
  currencyFormat(num) {
    return '$' + num.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
 }

  renderPaymentSelection(items) {
    return (
      <TouchableOpacity
        style={{flexDirection: 'row', marginTop: 5, alignItems: 'center'}}
        onPress={() => (this.paymentSelected = items.value)}>
        {items.value === this.paymentSelected ? (
          <Icon name="dot-circle" color={colors.mainColor} size={15} />
        ) : (
          <Icon name="circle" color={'black'} size={15} />
        )}
        <Text style={{marginLeft: 5, fontFamily: Fonts.ubuntu}}>
          {items.label}
        </Text>
      </TouchableOpacity>
    );
  }

  totalPrice() {
    var totalPrice = 0;
    this.data.services.map((items, index) => {
      // if (items.select) {
      console.log(items.price);
      totalPrice += items.price;
      //  }
    });
    return this.currencyFormat(totalPrice);
  }

  render() {
    return (
      <View style={{flex: 1, backgroundColor: 'white'}}>
        <CheckAnimate
          visible={this.store.animateStatus.show}
          progress={this.store.animateStatus.progress}
        />
        <LoadingView visible={this.store.loading} />
        <BackHeader instance={this} back={true} title={'付款'} />
        <View style={{margin: 20, flex: 1}}>
          {this.data.services.map((items, index) => {
            // if (items.select) {
            return (
              <View style={{flexDirection: 'row', marginTop: 20}}>
                <View style={{flex: 1}}>
                  <Text
                    style={{
                      color: colors.mainColor,
                      fontFamily: Fonts.ubuntu,
                    }}>
                    {items.name}
                  </Text>
                </View>
                <View style={{flex: 1, alignItems: 'flex-end'}}>
                  <Text style={{fontFamily: Fonts.ubuntu}}>
                    {this.this.currencyFormat(items.price)}
                  </Text>
                </View>
              </View>
            );
            //  }
          })}
          <View
            style={{
              height: 1,
              width: width - 40,
              backgroundColor: colors.line2Color,
              marginTop: 10,
            }}
          />

          <View style={{flexDirection: 'row', marginTop: 20}}>
            <View style={{flex: 1}}>
              <Text style={{color: colors.mainColor, fontFamily: Fonts.ubuntu}}>
                {'Total: '}
              </Text>
            </View>
            <View style={{flex: 1, alignItems: 'flex-end'}}>
              <Text style={{fontFamily: Fonts.ubuntu}}>
                {this.totalPrice()}
              </Text>
            </View>
          </View>
          <View style={{marginTop: 100}}>
            <Text
              style={{
                color: colors.mainColor,
                fontFamily: Fonts.ubuntu,
                marginBottom: 10,
              }}>
              {'付款方法'}
            </Text>
            {this.paymentseletion.map((items, index) => {
              return this.renderPaymentSelection(items);
            })}
          </View>
          <View
            style={{
              height: 1,
              width: width - 40,
              backgroundColor: colors.line2Color,
              marginTop: 50,
            }}
          />
          <View style={{width: width - 40, alignItems: 'center'}}>
            <TouchableOpacity
              onPress={() => {
                console.log(this.paid);
                if (this.paid) {
                  this.store.ownerCreateContract(
                    this.data,
                    this,
                    true,
                    this.paymentSelected,
                  );
                } else {
                  this.store.payAgain(
                    this.data,
                    this,
                    true,
                    this.paymentSelected,
                  );
                }
              }}
              // onPress={() => {
              //   console.log(this.store.creditCardinfo.id);
              // }}
              style={{
                backgroundColor: colors.mainColor,
                height: 28,
                borderRadius: 5,
                width: 250,
                justifyContent: 'center',
                alignItems: 'center',
                marginTop: 20,
              }}>
              <Text
                style={{
                  color: 'white',
                  fontSize: 14,
                  fontWeight: 'bold',
                }}>
                {'確認付款'}
              </Text>
            </TouchableOpacity>
          </View>
          <Image
            style={{height: 100, width: 100}}
            source={{uri: this.store.wechatQRCode}}
          />
        </View>
        <Toast
          ref="toast"
          style={{backgroundColor: colors.mainColor}}
          position="bottom"
          positionValue={200}
          fadeInDuration={750}
          fadeOutDuration={2000}
          opacity={0.8}
          textStyle={{color: 'white'}}
        />
      </View>
    );
  }
}

const styles = StyleSheet.flatten({
  button: {
    marginTop: 20,
    width: width,
    height: 60,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colors.statusBarColor,
  },
  inputTextView: {
    marginTop: 20,
    borderBottomWidth: 1,
    borderBottomColor: colors.line2Color,
    height: 50,
  },
  inputTextTitleView: {
    fontFamily: Fonts.ubuntuL,
    fontSize: 14,
    color: colors.line2Color,
  },
  title: {
    fontFamily: Fonts.ubuntu,
    fontSize: 17,
    marginTop: 20,
  },
  subtitle: {
    fontFamily: Fonts.ubuntu,
    fontSize: 14,
  },
  buttonText: {
    color: '#fff',
  },
  picker: {
    fontSize: 20,
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderWidth: 1,
    borderColor: 'black',
    borderRadius: 4,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
  },
  textView: {
    color: colors.mainColor,
    fontFamily: Fonts.ubuntu,
    fontSize: size.getSize(20),
    fontWeight: 'bold',
  },
});
const pickerSelectStyles = StyleSheet.create({
  inputIOS: {
    fontSize: 16,
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 4,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
  },
  inputAndroid: {
    fontSize: 16,
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderWidth: 0.5,
    borderColor: 'black',
    borderRadius: 8,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
  },
});
