import React, { JSXElementConstructor } from "react";
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  TouchableOpacity,
  Animated,
  TextInput,
  Image,
  ViewStyle,
  TextStyle,
  ScrollView,
} from "react-native";
import { countries, _getFlag } from "./_inc/_lib/enhanced";

interface CountryCodeProps {
  /**
   * Selected Country Dial Code
   */
  selected: string;
  /**
   * Function to set the country
   */
  setSelected: React.Dispatch<React.SetStateAction<undefined>>;
  /**
   * Function to set the country
   */
  setCountryDetails?: React.Dispatch<React.SetStateAction<undefined>>;
  /**
   * State variable for storing the phone number
   */
  phone?: string;
  /**
   * Function to set the phone number state variable
   */
  setPhone?: React.Dispatch<React.SetStateAction<undefined>>;
  /**
   * Style the Country Code Container
   */
  countryCodeContainerStyles?: ViewStyle;
  /**
   * Style the text inside Country Code
   */
  countryCodeTextStyles?: TextStyle;
  /**
   * Phone Text Input Styles
   */
  phoneStyles?: ViewStyle;
  /**
   * URL for the search Icon
   */
  searchIcon?: string;
  /**
   * URL for the close Icon
   */
  closeIcon?: string;
  /**
   * Search Input Container Styles
   */
  searchStyles?: ViewStyle;
  /**
   * Search Input Text Styles
   */
  searchTextStyles?: TextStyle;
  /**
     /**
    * Search Dropdown Container Styles
    */
  dropdownStyles?: ViewStyle;
  /**
   * Search Dropdown Text Styles
   */
  dropdownTextStyles?: TextStyle;
}

const CountryCodeDropdownPicker: React.FC<CountryCodeProps> = ({
  selected,
  setSelected,
  setCountryDetails = () => {},
  phone,
  setPhone,
  countryCodeContainerStyles = {},
  countryCodeTextStyles = {},
  phoneStyles = {},
  searchIcon,
  closeIcon,
  searchStyles = {},
  searchTextStyles = {},
  dropdownStyles = {},
  dropdownTextStyles = {},
}) => {
  const [_selected, _setSelected] = React.useState(false);
  const [_search, _setSearch] = React.useState("");
  const [_countries, _setCountries] = React.useState(countries);

  const slideAnim = React.useRef(new Animated.Value(0)).current;

  const _static = {
    search: searchIcon ?? require("./_inc/images/search.png"),
    close: closeIcon ?? require("./_inc/images/close.png"),
  };

  const slideDown = () => {
    _setSelected(true);
    Animated.timing(slideAnim, {
      toValue: 235,
      duration: 400,
      useNativeDriver: false,
    }).start();
  };

  const slideUp = () => {
    Animated.timing(slideAnim, {
      toValue: 0,
      duration: 300,
      useNativeDriver: false,
    }).start(() => _setSelected(false));
  };

  function _searchCountry(country) {
    _setSearch(country);
    let c = countries.filter((item) => {
      return item.name.includes(country);
    });
    _setCountries(c);
  }

  const RenderBtn = () => {
    if (!_selected) {
      return (
        <View style={[styles.row]}>
          <TouchableOpacity
            style={{ flexDirection: "row" }}
            onPress={() => {
              _setCountries(countries);
              slideDown();
            }}
          >
            <View
              style={[styles.selectedContainer, countryCodeContainerStyles]}
            >
              <Text style={{ color: "#000", marginRight: 5 }}>
                {_getFlag(selected)}
              </Text>
              <Text style={[countryCodeTextStyles]}>{selected}</Text>
            </View>
          </TouchableOpacity>
          {phone != undefined && setPhone != undefined ? (
            <TextInput
              style={[
                {
                  marginLeft: 5,
                  paddingVertical: 5,
                  paddingLeft: 15,
                  flex: 1,
                  borderWidth: 1,
                  borderRadius: 8,
                  borderColor: "#dddddd",
                },
                phoneStyles,
              ]}
              placeholder={"Enter Mobile Number"}
              keyboardType={"phone-pad"}
              placeholderTextColor={"#dddddd"}
              onChangeText={setPhone}
              value={phone}
            />
          ) : (
            <></>
          )}
        </View>
      );
    } else {
      return (
        <View style={[styles.inputBoxContainer, searchStyles]}>
          <View style={[styles.row, { width: "90%" }]}>
            <Image
              source={_static.search}
              resizeMode={"contain"}
              style={[styles.icon, { width: 15, height: 15, marginLeft: 10 }]}
            />
            <TextInput
              style={[
                { marginLeft: 5, paddingVertical: 3, flex: 1, color: "black" },
                searchTextStyles,
              ]}
              onChangeText={_searchCountry}
              value={_search}
            />
          </View>

          <TouchableOpacity
            onPress={() => slideUp()}
            style={{ marginHorizontal: 10 }}
          >
            <Image
              source={_static.close}
              resizeMode={"contain"}
              style={styles.icon}
            />
          </TouchableOpacity>
        </View>
      );
    }
  };

  const renderCountryItem = ({ item }) => {
    return (
      <TouchableOpacity
        style={styles.countryContainer}
        key={item.code}
        onPress={() => {
          setSelected(item.dial_code);
          setCountryDetails(item);
          slideUp();
        }}
      >
        <Text style={styles.countryFlag}>{item?.flag}</Text>
        <Text style={[styles.countryText, dropdownTextStyles]}>
          {item?.name}
        </Text>
      </TouchableOpacity>
    );
  };

  return (
    <ScrollView style={styles.container}>
      {RenderBtn()}

      {_selected ? (
        <Animated.View style={{ maxHeight: slideAnim }}>
          <FlatList
            data={_countries}
            style={[styles.valuesContainer, dropdownStyles]}
            showsVerticalScrollIndicator={false}
            renderItem={renderCountryItem}
            keyExtractor={(item) => item.code}
            ListEmptyComponent={
              <Text style={{ padding: 15, textAlign: "center" }}>
                No Result Found
              </Text>
            }
          />
        </Animated.View>
      ) : (
        <></>
      )}
    </ScrollView>
  );
};

export default CountryCodeDropdownPicker;

const styles = StyleSheet.create({
  row: {
    flexDirection: "row",
    alignItems: "center",
    color: "black",
  },
  container: {
    width: "100%",
    color: "black",
  },
  selectedContainer: {
    padding: 10,
    flexDirection: "row",
    minWidth: "20%",
    alignItems: "center",
    justifyContent: "space-between",
    borderWidth: 1,
    borderColor: "#dddddd",
    borderRadius: 8,
    backgroundColor: "white",
    color: "black",
  },
  valuesContainer: {
    borderWidth: 1,
    borderColor: "#dddddd",
    borderRadius: 8,
    maxHeight: 235,
    backgroundColor: "white",
    marginTop: 8,
    color: "black",
  },
  countryContainer: {
    flexDirection: "row",
    paddingHorizontal: 15,
    paddingVertical: 13,
    borderBottomWidth: 1,
    borderColor: "#dedede",
    alignItems: "center",
    color: "black",
  },
  countryFlag: {
    marginRight: 8,
    color: "black",
  },
  countryText: {
    fontWeight: "bold",
    color: "black",
  },
  inputBoxContainer: {
    width: "100%",
    borderWidth: 1,
    borderColor: "#dddddd",
    borderRadius: 8,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    color: "black",
  },
  icon: {
    width: 10,
    height: 10,
  },
});