import React, {
useState, useEffect, useCallback
} from "react";
import {
View,
Text,
TextInput,
TouchableOpacity,
StyleSheet
} from "react-native";
import ModalDropdown from
"react-native-modal-dropdown";
import { styles } from "./Style";

const App = () => {
const [amount, setAmount] =
    useState("");
const [fromCurrency, setFromCurrency] =
    useState("USD");
const [toCurrency, setToCurrency] =
    useState("EUR");
const [currencies, setCurrencies] =
    useState([]);
const [convertedAmount, setConvertedAmount] =
    useState(null);

const convertCurrency =
    useCallback(() => {
    if (!amount) {
        setConvertedAmount(null);
        return;
    }
    fetch(`
https://api.exchangerate-api.com/v4/latest/${fromCurrency}
        `)
        .then((response) => response.json())
        .then((data) => {
        const exchangeRates =
            data.rates;
        const conversionRate =
            exchangeRates[toCurrency];

        if (conversionRate) {
            const result =
            parseFloat(amount) * conversionRate;
            setConvertedAmount(result.toFixed(2));
        } else {
            setConvertedAmount("Invalid Currency ");
        }
        })
        .catch((error) => {
        console.error("Error converting currency: ", error
        );
        });
    }, [amount, fromCurrency, toCurrency]);

useEffect(() => {
    fetch(`
https://api.exchangerate-api.com/v4/latest/USD
    `)
    .then((response) =>
        response.json())
    .then((data) => {
        const currencyList =
        Object.keys(data.rates);
        setCurrencies(currencyList);
    })
    .catch((error) => {
        console.error(" Error fetching currency data: ",
        error);
    });
}, []);

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

const swapCurrencies = () => {
    // Swap the selected currencies
    setFromCurrency(toCurrency);
    setToCurrency(fromCurrency);
};

return (
    <View style={styles.container}>
    <View style={styles.subcontainer}>
        <Text style={styles.header}>
        Currency Converter</Text>
        <Text style={styles.label}>Amount:</Text>
        <View style={styles.inputContainer}>
        <TextInput
            style={styles.input}
            value={amount}
            onChangeText={(text) => setAmount(text)}
            keyboardType="numeric"
            placeholder="Enter amount"
            placeholderTextColor="#999"
        />
        </View>
        <Text style={styles.label}>
        From Currency:
        </Text>
        <View style={styles.inputContainer}>
        <ModalDropdown
            style={styles.dropdown}
            options={currencies}
            defaultValue={fromCurrency}
            onSelect={(index, value) =>
            setFromCurrency(value)}
        />
        </View>
        <TouchableOpacity
        style={styles.swapButton}
        onPress={swapCurrencies}>
        <Text style={styles.swapButtonText}>
            &#8646;
        </Text>
        </TouchableOpacity>
        <Text style={styles.label}>
        To Currency:
        </Text>
        <View style={styles.inputContainer}>
        <ModalDropdown
            style={styles.dropdown}
            options={currencies}
            defaultValue={toCurrency}
            onSelect={(index, value) =>
            setToCurrency(value)}
        />
        </View>

        <TouchableOpacity
        style={styles.convertButton}
        onPress={convertCurrency}
        >
        <Text style={styles.convertButtonText}>
            Convert
        </Text>
        </TouchableOpacity>

        {convertedAmount !== null && (
        <Text style={styles.result}>
            {amount} {fromCurrency} is
            {convertedAmount} {toCurrency}
        </Text>
        )}
    </View>
    </View>
);
};

export default App;

//styles.js

import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f5f5f5"
},
subcontainer: {
    shadowColor: "rgba(0, 0, 0, 0.2)",
    shadowOffset: {
    width: 0,
    height: 6
    },
    shadowOpacity: 1,
    shadowRadius: 15,
    elevation: 5,
    padding: 40,
    borderRadius: 20,
    backgroundColor: "#ffffff"
},
header: {
    fontSize: 28,
    fontWeight: "bold",
    marginBottom: 20,
    color: "green"
},
inputContainer: {
    flexDirection: "row",
    alignItems: "center",
    marginVertical: 10
},
label: {
    fontSize: 19,
    marginRight: 10,
    color: "#333",
    fontFamily: "Pacifico"
},
input: {
    flex: 1,
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 10,
    paddingHorizontal: 10,
    height: 40,
    color: "#333"
},
dropdown: {
    width: 150,
    height: 40,
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 4,
    paddingHorizontal: 10,
    justifyContent: "center",
    color: "#333"
},
convertButton: {
    backgroundColor: "#007BFF",
    borderRadius: 4,
    paddingVertical: 12,
    paddingHorizontal: 24,
    marginTop: 20,
    shadowColor: "rgba(0, 123, 255, 0.5)",
    shadowOffset: {
    width: 0,
    height: 3
    },
    shadowOpacity: 1,
    shadowRadius: 15,
    elevation: 3
},
convertButtonText: {
    color: "white",
    fontSize: 18,
    fontWeight: "bold",
    textAlign: "center"
},
result: {
    marginTop: 20,
    fontSize: 18,
    color: "#333"
},
swapButton: {
    backgroundColor: "#ddd",
    borderRadius: 50,
    width: 45,
    height: 40,
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 10
},
swapButtonText: {
    fontSize: 30,
    textAlign: "center",
    color: "red",
    marginBottom: 10
}
});

export { styles };