import React, { useState } from "react";
import { StyleSheet, View } from "react-native";

import colors from "../config/colors";
import DropDownPicker from "react-native-dropdown-picker";
import { Shadow } from "react-native-shadow-2";

function DropDown({
  value,
  setValue,
  items,
  setItems,
  formPlaceholder,
  searchPlaceholder,
  nothingToShow,
}) {
  const [open, setOpen] = useState(false);

  return (
    <DropDownPicker
      open={open}
      listMode="MODAL"
      value={value}
      items={items}
      setValue={setValue}
      setItems={setItems}
      setOpen={setOpen}
      searchable={true}
      translation={{
        PLACEHOLDER: formPlaceholder,
        SEARCH_PLACEHOLDER: searchPlaceholder,
        SELECTED_ITEMS_COUNT_TEXT: "Item selecionado",
        NOTHING_TO_SHOW: nothingToShow,
      }}
      style={{
        backgroundColor: colors.white,
        borderRadius: 6,
        borderColor: colors.grayBG,
        borderWidth: 1,
      }}
      textStyle={{
        color: colors.medium,
        fontSize: 18,
      }}
      labelStyle={{
        color: colors.medium,
        fontSize: 18,
      }}
      modalProps={{
        animationType: "fade",
      }}
    />
  );
}

function SearchablePicker({
  value,
  setValue,
  items,
  setItems,
  formPlaceholder,
  searchPlaceholder,
  nothingToShow = "Não encontramos nada com esse termo",
}) {
  return (
    <View style={styles.location}>
      <Shadow
        offset={[0, 4]}
        distance={4}
        radius={4}
        startColor="rgba(0, 0, 0, 0.25)"
        paintInside={true}
      >
        <DropDown
          value={value}
          setValue={setValue}
          items={items}
          setItems={setItems}
          formPlaceholder={formPlaceholder}
          searchPlaceholder={searchPlaceholder}
          nothingToShow={nothingToShow}
        />
      </Shadow>
    </View>
  );
}

const styles = StyleSheet.create({
  location: {
    flex: 1,
    alignSelf: "flex-start",
    marginRight: 12,
    marginLeft: 12,
  },
});

export default SearchablePicker;