import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { useMediaQuery } from '@mui/material';

import { KEY_ENTER } from '@/modules/@common/constants/keyCodes';

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

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

const defineOptionsLength = (options, breakpoints) => {
  if (breakpoints.isXlBreakpoint) {
    return options.slice(0, 4);
  }

  if (breakpoints.isLgBreakpoint) {
    return options.slice(0, 3);
  }

  return options.slice(0, 2);
};

function VideoSearch(props) {
  const [isOpen, setOpen] = useState(false);
  const [inputValue, setInputValue] = useState('');

  const breakpoints = {
    isMdBreakpoint: useMediaQuery('(min-width:960px)'),
    isLgBreakpoint: useMediaQuery('(min-width:1280px)'),
    isXlBreakpoint: useMediaQuery('(min-width:1920px)'),
  };

  useEffect(() => {
    if (!props.search) {
      setInputValue('');
    }
  }, [props.search]);

  return (
    <div className={styles.VideoSearch}>
      <div className={styles.VideoSearchInputContainer}>
        <Autocomplete
          id="video-autocomplete"
          disablePortal
          clearOnBlur={false}
          freeSolo
          open={isOpen}
          value={props.search}
          options={defineOptionsLength(props.searchOptions, breakpoints)}
          size="small"
          onChange={(e, data) => {
            props.setField({ search: data });
            props.handleSearchAndSorting({ exactMatch: !!data?.value?.length });
          }}
          inputValue={inputValue}
          onInputChange={(e, newInputValue) => {
            setInputValue(newInputValue);

            if (newInputValue?.length) {
              props.getSearchOptions(newInputValue);
            } else {
              props.setField({ searchOptions: [] });
            }
          }}
          onOpen={() => {
            props.setField({ searchOptions: [] });
            setOpen(true);
          }}
          onClose={() => setOpen(false)}
          renderInput={(params) => (
            <TextField
              {...params}
              data-id="video-input"
              variant="outlined"
              placeholder="Search"
              onKeyDown={(e) => {
                if (e.keyCode === KEY_ENTER && inputValue?.length !== 1) {
                  props.setField({
                    search: {
                      label: inputValue,
                      value: inputValue,
                    },
                  });
                  props.handleSearchAndSorting();
                  setOpen(false);
                }
              }}
            />
          )}
        />
      </div>
    </div>
  );
}

VideoSearch.propTypes = {
  setField: PropTypes.func.isRequired,
  search: PropTypes.string.isRequired,
  searchOptions: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
  getSearchOptions: PropTypes.func.isRequired,
  handleSearchAndSorting: PropTypes.func.isRequired,
};

VideoSearch.propTypes = {
  setField: PropTypes.func.isRequired,
  search: PropTypes.string.isRequired,
  searchOptions: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
  getSearchOptions: PropTypes.func.isRequired,
  handleSearchAndSorting: PropTypes.func.isRequired,
};

export default VideoSearch;
