import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
import InputAdornment from '@mui/material/InputAdornment';
import Button from '@mui/material/Button';
import { useTranslation } from 'next-i18next';

export default function SearchInput(props: {
  value: string;
  onChange: (input: string) => void;
  disabled?: boolean;
}) {
  const { value, onChange, disabled } = props;

  const [inputValue, setInputValue] = React.useState(value);

  const { t } = useTranslation();

  React.useEffect(() => {
    setInputValue(value);
  }, [value]);

  const handleClick = () => {
    onChange(inputValue);
  };

  return (
    <Box
      sx={{
        width: '100%',
        display: 'flex',
        gap: '1rem',
      }}
    >
      <TextField
        id="outlined-search"
        type="search"
        size="small"
        placeholder={t('search.input_placeholder')}
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <SearchRoundedIcon color="inherit" />
            </InputAdornment>
          ),
        }}
        sx={{
          width: '100%',
        }}
        value={inputValue}
        onChange={(event) => setInputValue(event.target.value)}
        disabled={disabled}
      />

      <Button
        variant="contained"
        size="small"
        onClick={handleClick}
        disabled={disabled}
      >
        {t('search.perform_search')}
      </Button>
    </Box>
  );
}