import React from 'react';
import {
  FlatList,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  ScrollView,
} from 'react-native';
import HeaderBack from '../../../components/Header/HeaderBack';
import {
  getFontXD,
  HEIGHTXD,
  toPriceVnd,
  WIDTHXD,
} from '../../../Config/Functions';
import R from '../../../assets/R';
import I18n from '../../../helper/i18/i18n';
import TextMoney from '../../../components/Input/InputMoney';
import Icon from 'react-native-vector-icons/Entypo';
import ItemEscrowCalculator from './ItemEscrowCalculator';

const EscrowCalculatorView = (props) => {
  return (
    <View style={{flex: 1, flexDirection: 'column', backgroundColor: 'white'}}>
      <HeaderBack title={'EscrowCalculator'} isWhite={true} />
      <ScrollView style={{paddingVertical: HEIGHTXD(60)}}>
        <View>
          <FlatList
            keyExtractor={(item) => item.id}
            data={props.listInput}
            renderItem={({item, index}) => (
              <ItemEscrowCalculator
                item={item}
                dataProduct={props.dataProduct}
                setProduct={(product) => {
                  item.product = product;
                  item.firstEscrow = parseFloat(item.lotNumber) * product.escrow;
                  props.setItemInput(item, index);
                }}
                setLotNumber={(lotNumber) => {
                  item.lotNumber = lotNumber.split('.').join('');
                  item.firstEscrow = item.product ? parseFloat(item.lotNumber) * item.product.escrow : 0;
                  props.setItemInput(item, index);
                }}
              />
            )}
          />
          <View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
            <TouchableOpacity
              onPress={() => {
                props.onAdd();
              }}
              style={styles.containerBtn}>
              <Icon name={'plus'} size={27} color={R.colors.white} />
            </TouchableOpacity>
          </View>
          <View style={{paddingHorizontal: WIDTHXD(60)}}>
            <TextMoney
              onChangeText={(val) => {
                props.setFirstEscrow(val.split('.').join(''));
              }}
              title={I18n.t('FirstEscrow')}
              value={props.firstEscrow}
              titleStyle={{
                marginTop: HEIGHTXD(180),
                fontSize: getFontXD(39),
              }}
            />
            <TextMoney
              editable={false}
              title={I18n.t('FirstEscrowTotal')}
              value={props.firstEscrowTotal}
              titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
              inputStyle={{backgroundColor: R.colors.gray7}}
            />
            <Text style={styles.textMessage}>{props.message}</Text>
          </View>

          <View
            style={{
              width: '100%',
              flexDirection: 'row',
              justifyContent: 'center',
              alignItems: 'center',
              marginTop: HEIGHTXD(80),
              marginBottom: HEIGHTXD(150),
            }}>
            <TouchableOpacity
              onPress={() => {
                props.onDelete();
              }}
              style={[
                styles.btn,
                {backgroundColor: R.colors.red2, marginRight: WIDTHXD(72)},
              ]}>
              <Text style={styles.txtButton}>{I18n.t('Delete')}</Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                props.onCalculator();
              }}
              style={styles.btn}>
              <Text style={styles.txtButton}>{I18n.t('Calculator')}</Text>
            </TouchableOpacity>
          </View>
        </View>
      </ScrollView>
    </View>
  );
};
export default EscrowCalculatorView;
const styles = StyleSheet.create({
  viewInput: {
    marginHorizontal: WIDTHXD(36),
    marginTop: WIDTHXD(69),
    marginBottom: WIDTHXD(44),
    borderWidth: 0.3,
    borderColor: '#707070',
    paddingHorizontal: WIDTHXD(24),
    paddingVertical: WIDTHXD(24),
  },
  textTitle: {
    fontSize: getFontXD(39),
    color: R.colors.color777,
  },
  textMessage: {
    fontSize: getFontXD(39),
    color: R.colors.black,
    marginTop: HEIGHTXD(68),
  },
  containerBtn: {
    marginHorizontal: WIDTHXD(36),
    backgroundColor: R.colors.main,
    width: WIDTHXD(144),
    height: WIDTHXD(144),
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 3,
    borderRadius: 30,
  },
  btn: {
    width: WIDTHXD(428),
    height: HEIGHTXD(120),
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: R.colors.main,
    borderRadius: 5,
    marginBottom: HEIGHTXD(42),
  },
  txtButton: {
    color: R.colors.white,
    fontSize: getFontXD(48),
  },
});
