import React, {useState, useEffect} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  Platform,
  Alert,
} from 'react-native';
import R from '../../../assets/R';
import HeaderBack from '../../../components/Header/HeaderBack';
import TextField from '../../../components/Input/TextField';
import TextMulti from '../../../components/Input/TextMulti';
import TextDisable from '../../../components/Input/TextDisable';
import {connect} from 'react-redux';
import {
  getFontXD,
  HEIGHTXD,
  toPriceVnd,
  checkFormatArray,
} from '../../../Config/Functions';
import PickerItem from '../../../components/Picker/PickerItem';
import RadioForm from 'react-native-simple-radio-button';
import {widthDraw, getListWidthDraw} from '../../../apis/Functions/Widthdraw';
import {useNavigation} from '@react-navigation/native';
import {showLoading, hideLoading} from '../../../actions/loadingAction';

var radio_props = [
  {label: 'Từ ví', value: 'WALLET'},
  {label: 'Từ tài khoản CQG', value: 'INVESTMENT'},
];
const {width} = Dimensions.get('window');

const WalletWithdraw = (props) => {
  const [data, setData] = useState([]);
  const [src, setSrc] = useState('WALLET');
  const [type, setType] = useState();
  const [amount, setAmount] = useState();
  const [notes, setNotes] = useState('');

  const navigate = useNavigation();

  useEffect(() => {
    getData();
  }, []);

  const getData = async () => {
    const res = await getListWidthDraw({
      platform: Platform.OS,
    });
    if (res.data.code == 200 && res.data.data) {
      console.log(res.data.data);
      const newList = res.data.data.map((e) => {
        return {...e, value: e.id, name: e.method};
      });
      setData(newList);
    } else {
      alert('Không lấy được danh sách phương thức!');
    }
  };

  const onPressWithdraw = async () => {
    const titles = ['tài khoản hưởng thụ', 'số tiền'];

    const index = checkFormatArray([type, amount]);

    if (index === true) {
      props.showLoading();
      const res = await widthDraw({
        src,
        receiving_account: type.id,
        amount,
        platform: Platform.OS,
        notes,
        fee: 0,
      });

      props.hideLoading();

      if (res.data.code == 200) {
        setTimeout(() => {
          Alert.alert('Thông báo!', res.data.message);
          navigate.goBack();
        }, 500);
      } else {
        setTimeout(() => {
          Alert.alert('Thông báo!', res.data.message);
        }, 500);
      }
    } else {
      Alert.alert('Vui lòng điền ' + titles[index]);
    }
  };

  return (
    <View style={{flex: 1}}>
      <HeaderBack title={'Rút tiền'} />
      <View style={styles.container}>
        {/* <View style={styles.wrapTop}>
          <View style={styles.itemTop}>
            <Text style={styles.txtTitle}>Ví</Text>
            <Text style={styles.txtMoney}>{toPriceVnd(1000000)}</Text>
          </View>
          <View style={{width: 1, backgroundColor: '#DBDBDB'}} />

          <View style={styles.itemTop}>
            <Text style={styles.txtTitle}>CQG</Text>
            <Text style={styles.txtMoney}>{toPriceVnd(1000000)}</Text>
          </View>
        </View> */}
        <View style={styles.wrapBody}>
          <Text
            style={{
              fontSize: getFontXD(42),
              color: R.colors.color777,
            }}>
            Tài khoản nguồn
          </Text>
          {/* <View style={styles.row}> */}
          <RadioForm
            radio_props={radio_props}
            labelStyle={{fontSize: getFontXD(42)}}
            formHorizontal={true}
            style={styles.row}
            initial={0}
            onPress={(value) => {
              setSrc(value);
            }}
          />
          {/* </View> */}
          <Text
            style={{
              fontSize: getFontXD(42),
              color: R.colors.color777,
            }}>
            Chọn tài khoản hưởng thụ
          </Text>
          <PickerItem
            width={width - 20}
            data={data}
            onValueChange={(value, items) => {
              setType(items);
            }}
          />

          <TextField
            onChangeText={(val) => setAmount(val)}
            title={'Số tiền'}
            isNumber={true}
          />
          <TextMulti onChangeText={(val) => setNotes(val)} title={'Ghi chú'} />
        </View>
      </View>
      <TouchableOpacity onPress={onPressWithdraw} style={styles.btnSend}>
        <Text style={styles.txtSend}>Rút tiền</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: R.colors.white,
    marginVertical: 10,
    shadowColor: '#AFA9A9',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.25,
    shadowRadius: 1.84,
    elevation: 1,
  },
  wrapTop: {
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomColor: '#DBDBDB',
  },
  itemTop: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 20,
  },
  wrapBody: {
    paddingHorizontal: 10,
    paddingVertical: 20,
  },
  txtMoney: {
    color: '#1C6AF6',
    fontSize: getFontXD(52),
  },
  txtTitle: {
    color: R.colors.black,
    fontSize: getFontXD(42),
  },
  txtSend: {
    fontSize: getFontXD(42),
    color: R.colors.white,
    fontWeight: 'bold',
  },
  btnSend: {
    position: 'absolute',
    bottom: 30,
    right: width / 2 - 70,
    width: 140,
    height: 40,
    backgroundColor: R.colors.main,
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  row: {
    height: HEIGHTXD(109),
    width: '100%',
    justifyContent: 'space-between',
    marginVertical: 5,
  },
});

const mapStateToProps = (state) => {
  return {
    user: state.userReducer,
  };
};
export default connect(mapStateToProps, {
  showLoading,
  hideLoading,
})(WalletWithdraw);
