import React from 'react';
import {StyleProp, ViewStyle} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconFilter} from '@tabler/icons-react-native';
import {SetState} from '@interfaces/generic';

import {ActionTitle} from '../ActionTitle';
import {SearchFilter} from '../SearchFilter';

interface Props {
  searchValue: string;
  onSearch: SetState<string>;
  onFilter: () => void;
  searchPlaceholder: string;
  title?: string;
  inputDisabled?: boolean;
  buttonDisabled?: boolean;
  showTitleButton?: boolean;
  actionTitleStyle?: StyleProp<ViewStyle>;
}
export function SearchHeader({
  searchValue,
  onSearch,
  onFilter,
  searchPlaceholder,
  title,
  inputDisabled,
  buttonDisabled,
  showTitleButton = true,
  actionTitleStyle,
}: Props) {
  const {t} = useTranslation();

  return (
    <>
      <SearchFilter
        searchPlaceholder={searchPlaceholder}
        onSearch={onSearch}
        searchValue={searchValue}
        inputDisabled={inputDisabled}
        onFilter={onFilter}
        buttonDisabled={buttonDisabled}
      />
      {title && (
        <ActionTitle
          title={title}
          buttonText={t('general.filter')}
          onPressButton={onFilter}
          IconButton={IconFilter}
          buttonDisabled={buttonDisabled}
          showButton={showTitleButton}
          style={actionTitleStyle}
        />
      )}
    </>
  );
}