import React, {FC} from 'react';
import {StyleSheet, TextInput, View} from 'react-native';
import {SPACING_12, SPACING_16, SPACING_4, SPACING_8} from '../Spacing/Spacing';
import IconComponent from '../Icon/IconComponent';
import {icons} from '../Icon/Icons';
import {useHeaderContext} from './Header';

interface HeaderSearchProps {
  placeholder?: string;
  onChangeText?: (text: string) => void;
}

const HeaderSearch: FC<HeaderSearchProps> = ({
  placeholder = 'Search',
  onChangeText,
}) => {
  const {colors} = useHeaderContext();
  const styles = themedStyle();

  return (
    <View style={styles.searchContainer}>
      <View style={styles.searchBox}>
        <View style={styles.searchBody}>
          <IconComponent name={icons.search} />
          <TextInput
            placeholder={placeholder}
            style={styles.input}
            placeholderTextColor={'#A1A1AA'}
            onChangeText={onChangeText}
          />
          <IconComponent name={icons.microphone} />
        </View>
      </View>
    </View>
  );
};

const themedStyle = () =>
  StyleSheet.create({
    searchContainer: {
      paddingHorizontal: SPACING_16,
      paddingBottom: SPACING_12,
      paddingTop: SPACING_4,
    },
    searchBox: {
      paddingHorizontal: 8,
      paddingVertical: 7,
      alignItems: 'center',
      backgroundColor: '#f0f0f0',
      borderRadius: SPACING_8,
      flexDirection: 'row',
    },
    input: {
      flex: 1,
      color: '#333',
      fontFamily: 'Sohne-Buch',
      fontSize: 16,
      lineHeight: 20,
      marginHorizontal: 8,
    },
    searchBody: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
    },
  });

export default HeaderSearch;