import React, { useState } from 'react';
import { StyleSheet, Text, TextInput, View } from 'react-native';
import Button from '../../components/Button';
import TextView from '../../components/TextView';
import Modal from "react-native-modal";
import { ModalProps } from "../../components/BottomModal";
import Dialog from '../../components/Dialog';
import apiVoucher from '../../api/apiVoucher';
import { PageList } from '../Router';

export default ViewRedeem = ({
  userInfo={},
  onChange
}) => {
  const [visible, showDialog] = useState(false);
  const [promoCode, setPromoCode] = useState("");
  const redeemVoucher = () => {
    showDialog(false);
    if (promoCode) {
      setTimeout(() => {
        Dialog.showProgressDialog();
        apiVoucher.redeemVoucher({
          redemptionCode: promoCode
        }).then(res => {
          Dialog.dismissLoading();
          if (onChange) {
            onChange();
          }
          if (res.msg) {
            setTimeout(() => {
              Dialog.showDialog({
                title: $t("voucher.vouchers"),
                message: res.msg,
                showCancel: false
              })
            }, 500);
          }
        }).catch(err => {
          Dialog.dismissLoading();
          if (err.err) {
            setTimeout(() => {
              Dialog.showDialog({
                title: $t("common.error"),
                message: err.err,
                showCancel: false
              })
            }, 500);
          }
        })
      }, 300);
    } else {
      toastLong($t("voucher.plsInputPromoCode"))
    }
  }
  return (
    <View>
      <View style={styles.redeemLayout}>
        <Button
          style={styles.buttonLeft}
          viewStyle={styles.buttonView}
          onClick={() => showDialog(true)}>
          <MaterialCommunityIcons
            name="ticket-percent-outline"
            size={24}
            color={textPrimary}/>
          <TextView
            style={styles.buttonText}
            numberOfLines={1}>
            {$t("voucher.inputPromoCode")}
          </TextView>
        </Button>
        <Text style={styles.btnDivide}></Text>
        <Button
          style={styles.buttonRight}
          viewStyle={styles.buttonView}
          onClick={() => startPage(PageList.pointsHistory)}>
          <TextView
            style={styles.buttonText}
            numberOfLines={1}>
            {$t("voucher.availablePoints")}
          </TextView>
          <TextView
            style={styles.valueText}
            numberOfLines={1}>
            {userInfo?.points || '0'}
          </TextView>
        </Button>
      </View>
      <Modal
        isVisible={visible}
        onBackButtonPress={() => showDialog(false)}
        onBackdropPress={() => showDialog(false)}
        {...ModalProps}>
        <View style={Dialog.styles.modalDialog}>
          <TextView style={Dialog.styles.title}>{$t('voucher.inputPromoCode')}</TextView>
          <View style={Dialog.styles.message}>
            <TextInput
              style={styles.inputView}
              allowFontScaling={false}
              maxLength={6}
              placeholderTextColor={textPlacehoder}
              onChangeText={text => setPromoCode(text)}
              onSubmitEditing={() => redeemVoucher()}
            />
          </View>
          { isIOS
          ? <View style={Dialog.styles.modalFooter}>
              <Button
                style={Dialog.styles.btnGroup}
                viewStyle={Dialog.styles.btnView}
                textStyle={Dialog.styles.btnConfirm}
                text={$t('nav.confirm')}
                onClick={() => redeemVoucher()}/>
              <Button
                style={[Dialog.styles.btnGroup, Dialog.styles.btnRight]}
                viewStyle={Dialog.styles.btnView}
                textStyle={Dialog.styles.btnConfirm}
                text={$t('nav.cancel')}
                onClick={() => showDialog(false)}/>
            </View>
          : <View style={Dialog.styles.modalFooter}>
              <Dialog.AndroidButton
                title={$t('nav.cancel')}
                onPress={() => showDialog(false)}/>
              <Dialog.AndroidButton
                title={$t('nav.confirm')}
                onPress={() => redeemVoucher()}/>
            </View>
          }
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  redeemLayout: {
    borderWidth: 1,
    borderColor: '#DADADA',
    borderRadius: 4,
    alignItems: 'center',
    flexDirection: 'row'
  },
  btnDivide: {
    width: 1,
    height: 26,
    backgroundColor: '#DADADA'
  },
  buttonLeft: {
    flex: 1,
    borderTopLeftRadius: 3,
    borderTopRightRadius: 0,
    borderBottomLeftRadius: 3,
    borderBottomRightRadius: 0,
    backgroundColor: 'transparent'
  },
  buttonRight: {
    flex: 1,
    borderTopLeftRadius: 0,
    borderTopRightRadius: 3,
    borderBottomLeftRadius: 0,
    borderBottomRightRadius: 3,
    backgroundColor: 'transparent'
  },
  buttonView: {
    flex: 1,
    height: 42,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center'
  },
  buttonText: {
    color: textPrimary,
    fontSize: 12,
    paddingLeft: 8,
    paddingRight: 8
  },
  valueText: {
    color: colorAccent,
    fontSize: 12
  },
  inputView: {
    color: textPrimary,
    fontSize: 14,
    height: 42,
    marginTop: 8,
    textAlign: 'center',
    paddingLeft: 12,
    paddingRight: 12,
    borderWidth: 1,
    borderColor: '#DADADA',
    borderRadius: 4,
    alignItems: 'center',
    flexDirection: 'row',
    textTransform: 'uppercase',
    backgroundColor: colorLight
  }
})