import React, { useState, useEffect } 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";
import { useFormikContext } from "formik";
import { ErrorMessage } from "./forms";

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({
  items,
  setItems,
  formPlaceholder,
  searchPlaceholder,
  name,
  setSelected,
  nothingToShow = "Não encontramos nada com esse termo",
  marginRight = 2,
  marginLeft = 16,
}) {

  const { values, setFieldValue, errors, touched } = name ?  useFormikContext() : [1,1,1,1];
  

  const [value, setValue] = useState(name ? values[name] : "");

  useEffect(() => {
    if (name)
      setFieldValue(name, value, true);
    else
      setSelected(value)
  }, [value]);

  return (
    <View
      style={[
        styles.location,
        { marginLeft: marginLeft, marginRight: marginRight },
      ]}
    >
      <Shadow
        offset={[0, 3]}
        distance={3}
        radius={4}
        startColor="rgba(0, 0, 0, 0.15)"
        paintInside={true}
      >
        <DropDown
          value={value}
          setValue={setValue}
          items={items}
          setItems={setItems}
          formPlaceholder={formPlaceholder}
          searchPlaceholder={searchPlaceholder}
          nothingToShow={nothingToShow}
        />
      </Shadow>

      {name && (<ErrorMessage error={errors[name]} visible={touched[name]} />)}
    </View>
  );
}

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

export default SearchablePicker;