import React, {Component, useState, useEffect} from 'react';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  Dimensions,
} from 'react-native';
import HeaderBack from '../../components/Header/HeaderBack';
const {width} = Dimensions.get('window');
import PickerItem from '../../components/Picker/PickerItem';
import I18n from '../../helper/i18/i18n';
import AppText from '../../components/AppText';
import TextField from '../../components/Input/TextField';
import {getFontXD, HEIGHTXD, toPriceVnd, WIDTHXD} from '../../Config/Functions';
import R from '../../assets/R';
import {showAlert, TYPE} from '../../components/DropdownAlert';
import {getTransactionListByCategory} from '../../apis/Functions/Transaction';

const DATA = [
  {
    id: 1,
    name: 'Đậu tương',
    value: 0.36744,
  },
  {
    id: 2,
    name: 'Khô đậu tương',
    value: 1.1023,
  },
  {
    id: 3,
    name: 'Dầu đậu tương',
    value: 22.0462,
  },
  {
    id: 4,
    name: 'Ngô',
    value: 0.39368,
  },
  {
    id: 5,
    name: 'Lúa mỳ',
    value: 0.36744,
  },
  {
    id: 6,
    name: 'Cà phê arabica',
    value: 22.0462,
  },
  {
    id: 7,
    name: 'Cà phê Robusta',
    value: 1,
  },

  {
    id: 8,
    name: 'Ca cao',
    value: 1,
  },
  {
    id: 9,
    name: 'Bông',
    value: 22.0462,
  },
  {
    id: 10,
    name: 'Đường',
    value: 22.0462,
  },
  {
    id: 11,
    name: 'Cao su',
    value: 9.4,
  },
];

const ExchangeRate = (props) => {
  const [product, setProduct] = useState();
  const [priceExchange, setPriceExchange] = useState();
  const [usdTan, setUsdTan] = useState();
  useEffect(() => {
    caculator();
  }, [product, priceExchange]);

  const caculator = () => {
    if (product && priceExchange) {
      const total = priceExchange * product.value;
      setUsdTan(total + '');
    } else if (!priceExchange) setUsdTan('');
  };

  return (
    <View style={{flex: 1}}>
      <HeaderBack title={'ExchangeRate'} />
      <View style={{flex: 1, paddingTop: 10, paddingHorizontal: 10}}>
        <AppText style={styles.txtTitle} i18nKey={'Product'} />
        <PickerItem
          width={width - 20}
          data={DATA}
          onValueChange={(value, items) => {
            setProduct(items);
          }}
        />
        <TextField
          value={'US cent/ giạ'}
          editable={true}
          title={I18n.t('UnitsQuotedFloor')}
        />
        <TextField
          onChangeText={(val) => setPriceExchange(val)}
          title={I18n.t('ConversionPrice')}
        />
        <TextField
          value={usdTan}
          editable={true}
          title={I18n.t('ConvertUSD')}
        />
        <View style={styles.footer}>
          <TouchableOpacity style={styles.btnContainer}>
            <AppText style={styles.txtBtn} i18nKey={'Delete'} />
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  txtTitle: {
    fontSize: getFontXD(42),
    color: R.colors.color777,
    marginTop: 15,
  },
  note: {
    fontSize: getFontXD(36),
    fontStyle: 'italic',
    marginTop: 10,
  },
  row: {
    height: HEIGHTXD(109),
    width: '80%',
    justifyContent: 'space-between',
    marginVertical: 5,
    paddingHorizontal: 10,
  },
  footer: {
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 30,
  },
  btnContainer: {
    width: WIDTHXD(428),
    height: HEIGHTXD(120),
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: R.colors.red2,
    borderRadius: 10,
  },
  txtBtn: {
    fontSize: getFontXD(48),
    color: R.colors.white,
    fontWeight: '600',
  },
  wrapInput: {
    width: WIDTHXD(431),
    backgroundColor: R.colors.white,
    height: HEIGHTXD(109),
    fontSize: getFontXD(42),
    borderRadius: 5,
    paddingHorizontal: 10,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,
    elevation: 2,
  },
  wrap: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  Item: {
    marginBottom: 20,
  },
  txtNote: {
    fontSize: getFontXD(36),
    textAlign: 'right',
    marginTop: 10,
  },
});
export default ExchangeRate;
