import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { SearchRounded } from '@mui/icons-material';

import { queryParamsSelector } from '../../redux/selectors';
import { getLiveEventsAction } from '../../redux/slices';

import { IconButton, InputAdornment, TextField } from '@/mui/components';

import styles from './styles.module.scss';

function LiveEventsListSearch() {
  const dispatch = useDispatch();
  const queryParams = useSelector(queryParamsSelector);

  const handleSearchChange = (event) => {
    dispatch(
      getLiveEventsAction({
        ...queryParams,
        search: event.target.value,
        page: 1,
      }),
    );
  };

  const handleSearchClick = () => {
    dispatch(
      getLiveEventsAction({
        ...queryParams,
        page: 1,
      }),
    );
  };

  return (
    <TextField
      placeholder="Search"
      size="small"
      defaultValue={queryParams.search}
      onChange={handleSearchChange}
      className={styles.Search}
      InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            <IconButton onClick={handleSearchClick}>
              <SearchRounded />
            </IconButton>
          </InputAdornment>
        ),
      }}
    />
  );
}

export default LiveEventsListSearch;
