"use strict";

import React, { useRef, useState } from 'react';
import styled from 'styled-components/native';
import { Animated, FlatList, Keyboard } from 'react-native';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const SelectWrapper = styled.View`
  position: relative;
  width: 100%;
`;
const SelectBox = styled.TouchableOpacity`
  border: ${({
  borderColor
}) => borderColor ? `1px solid ${borderColor}` : '1px solid #ccc'};
  padding: 10px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: ${({
  isOpen
}) => isOpen ? '0px 4px 8px rgba(0, 0, 0, 0.1)' : 'none'};
`;
const Placeholder = styled.Text`
  color: #aaa;
`;
const Icon = styled(Animated.Text)`
  margin-left: 10px;
`;
const Dropdown = styled.View`
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  max-height: 200px;
  border: 1px solid #ccc;
  border-radius: 5px;
  z-index: 100;
`;
const SearchBox = styled.TextInput`
  width: 100%;
  padding: 10px;
  border-bottom-width: 1px;
  border-color: #ccc;
  box-sizing: border-box;
`;
const DropdownItem = styled.TouchableOpacity`
  padding: 10px;
`;
const DropdownItemText = styled.Text`
  color: #000;
`;
const Select = ({
  options,
  placeholder,
  onSelect,
  accentColor,
  selectedValue = null
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const [selected, setSelected] = useState(selectedValue);
  const [searchTerm, setSearchTerm] = useState('');
  const rotationAnim = useRef(new Animated.Value(0)).current;
  const toggleDropdown = () => {
    setIsOpen(prev => !prev);
    Animated.timing(rotationAnim, {
      toValue: isOpen ? 0 : 1,
      duration: 300,
      useNativeDriver: true
    }).start();
  };
  const handleSelect = option => {
    setSelected(option);
    onSelect(option);
    setIsOpen(false);
    setSearchTerm('');
    Keyboard.dismiss();
  };
  const filteredOptions = options.filter(option => option.name.toLowerCase().includes(searchTerm.toLowerCase()));
  const rotateInterpolation = rotationAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '180deg']
  });
  return /*#__PURE__*/_jsxs(SelectWrapper, {
    children: [/*#__PURE__*/_jsxs(SelectBox, {
      isOpen: isOpen,
      onPress: toggleDropdown,
      borderColor: accentColor,
      children: [selected ? /*#__PURE__*/_jsx(Placeholder, {
        children: selected.name
      }) : /*#__PURE__*/_jsx(Placeholder, {
        children: placeholder
      }), /*#__PURE__*/_jsx(Icon, {
        style: {
          transform: [{
            rotate: rotateInterpolation
          }],
          color: accentColor
        },
        children: "\u25BC"
      })]
    }), isOpen && /*#__PURE__*/_jsxs(Dropdown, {
      children: [/*#__PURE__*/_jsx(SearchBox, {
        placeholder: "Search...",
        value: searchTerm,
        onChangeText: setSearchTerm
      }), /*#__PURE__*/_jsx(FlatList, {
        data: filteredOptions,
        keyExtractor: item => item.id,
        renderItem: ({
          item
        }) => /*#__PURE__*/_jsx(DropdownItem, {
          onPress: () => handleSelect(item),
          children: /*#__PURE__*/_jsx(DropdownItemText, {
            children: item.name
          })
        }),
        ListEmptyComponent: /*#__PURE__*/_jsx(DropdownItem, {
          children: /*#__PURE__*/_jsx(DropdownItemText, {
            children: "No options found"
          })
        })
      })]
    })]
  });
};
export default Select;
//# sourceMappingURL=Select.js.map