import React, {Component, useState} from 'react';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import HeaderBack from '../../components/Header/HeaderBack';

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, WIDTHXD} from '../../Config/Functions';
import R from '../../assets/R';
import Icon from 'react-native-vector-icons/FontAwesome';

const dataType = [
  {
    value: '0',
    name: 'KG',
  },
  {
    value: '1',
    name: 'Pound',
  },
];

const ConvertUnit = (props) => {
  const [typeOne, setTypeOne] = useState();
  const [typeTwo, setTypeTwo] = useState();
  const [valueOne, setValueOne] = useState();
  const [valueTwo, setValueTwo] = useState();
  const [result, setResult] = useState();

  const onClick = () => {
    console.log('Heloo', typeOne, typeTwo, valueOne, valueTwo);
  };

  return (
    <View style={{flex: 1}}>
      <HeaderBack title={'ConvertUnit'} />
      <View style={{flex: 1, paddingTop: 20, paddingHorizontal: 20}}>
        <AppText style={styles.txtTitle} i18nKey={'Count'} />
        <View style={styles.Item}>
          <View style={styles.wrap}>
            <TextInput
              onChangeText={(val) => setValueOne(val)}
              keyboardType={'number-pad'}
              style={styles.wrapInput}
              maxLength={12}
            />
          </View>
        </View>

        <View style={styles.Item}>
          <View style={styles.wrap}>
            <PickerItem
              width={WIDTHXD(400)}
              data={dataType}
              onValueChange={(value, items) => {
                setTypeTwo(items);
              }}
            />
            <TouchableOpacity>
              <Icon name={'exchange'} size={30} color={R.colors.black} />
            </TouchableOpacity>

            <PickerItem
              width={WIDTHXD(400)}
              data={dataType}
              onValueChange={(value, items) => {
                setTypeOne(items);
              }}
            />
          </View>
        </View>

        <Text style={styles.txtResult}>Kết quả: {result}</Text>

        <View style={styles.footer}>
          <TouchableOpacity onPress={onClick} style={styles.btnContainer}>
            <AppText style={styles.txtBtn} i18nKey={'Caculate'} />
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  txtTitle: {
    fontSize: getFontXD(42),
    color: R.colors.color777,
    marginBottom: 5,
  },
  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: 40,
  },
  btnContainer: {
    width: WIDTHXD(428),
    height: HEIGHTXD(120),
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: R.colors.main,
    borderRadius: 10,
  },
  txtBtn: {
    fontSize: getFontXD(48),
    color: R.colors.white,
    fontWeight: '600',
  },
  wrapInput: {
    width: '100%',
    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,
  },
  txtResult: {
    fontSize: getFontXD(52),
    color: R.colors.black,
    fontWeight: '600',
    textAlign: 'center',
    marginTop: 20,
  },
});
export default ConvertUnit;
