import * as React from 'react';
import {
  TextInput,
  ViewStyle,
  TextStyle,
  View,
  TouchableOpacity,
} from 'react-native';
import { getColor } from './style-utils';
import { InputClearIcon } from './icons/input-clear';
import { SearchIcon } from './icons/search-icon';
import { useState } from 'react';
import Text from './text';
import { SearchBlackIcon } from './icons/search-black';
import { SearchGrayIcon } from './icons/search-gray';
import { ClearGrayIcon } from './icons/clear-gray';

interface SearchBarProps {
  value?: string;
  placeholder?: string;
  textColor?: string;
  placeholderColor?: string;
  backgroundColor?: string;
  width?: string;
  height?: string;
  radius?: string;
  border?: {
    borderWidth: string;
    borderColor: string;
  };
  textStyle?: TextStyle;
  className?: string;
  style?: ViewStyle;
  disabled?: boolean;
  onChangeText?: (text: string) => void;
  onClear?: () => void;
  onSubmit?: () => void;
  blurIcon?: React.ReactNode;
  onFocus?: () => void;
  onBlur?: () => void;
}

export default React.forwardRef<TextInput, SearchBarProps>(function SearchBar(
  {
    value,
    placeholder = '검색어를 입력하세요',
    textColor = 'black',
    placeholderColor = 'gray-400',
    backgroundColor = 'white',
    width = 'w-full',
    height = 'h-[48px]',
    radius = 'rounded-xl',
    border = { borderWidth: '0', borderColor: 'transparent' },
    textStyle,
    className,
    style,
    disabled = false,
    onChangeText,
    onClear,
    onSubmit,
    blurIcon,
    onFocus,
    onBlur,
  },
  ref,
) {
  const [isFocused, setIsFocused] = useState(false);

  const getStatusStyles = () => {
    return isFocused
      ? {
          borderWidth: 2,
          borderColor: getColor('#111827'),
          backgroundColor: 'white',
        }
      : { borderWidth: 0, backgroundColor: getColor(backgroundColor) };
  };

  return (
    <View
      className={`
        ${width} ${height} ${radius}
        ${disabled ? 'opacity-50' : ''}
        ${className || ''}
      `}
      style={[
        {
          borderColor: getColor(border.borderColor),
          ...getStatusStyles(),
        },
        !className && style,
      ]}
    >
      <View className="flex-row items-center h-full">
        <View className="pl-4">
          {isFocused ? <SearchGrayIcon /> : blurIcon || <SearchBlackIcon />}
        </View>
        <TextInput
          ref={ref}
          value={value}
          placeholder={placeholder}
          onChangeText={onChangeText}
          onFocus={() => {
            setIsFocused(true);
            onFocus?.();
          }}
          onBlur={() => {
            setIsFocused(false);
            onBlur?.();
          }}
          onSubmitEditing={onSubmit}
          className="flex-1 px-2 h-full"
          style={[
            {
              color: getColor(textColor),
            },
            textStyle,
          ]}
          placeholderTextColor={getColor(placeholderColor)}
          editable={!disabled}
        />
        {value && onClear && isFocused && (
          <TouchableOpacity
            activeOpacity={1}
            className="px-4 h-full justify-center"
            onPress={onClear}
          >
            <ClearGrayIcon />
          </TouchableOpacity>
        )}
      </View>
    </View>
  );
});