import _ from '@lodash';
import Button from '@mui/material/Button';
// import Select from '@mui/material/Select';
import TextField from '@mui/material/TextField';
import clsx from 'clsx';
import { forwardRef, memo, useCallback } from 'react';

const SEARCH_INPUT_MODES = {
  simple: 'simple',
  manual: 'manual',
};

const StyledTextField = forwardRef((props, ref) => (
  <TextField
    InputProps={{
      sx: {
        background: (theme) => theme.palette.background.paper,
        borderRadius: '15px',
        borderColor: (theme) => theme.palette.secondary.light,
        borderWidth: '1px',
        boxShadow: '1px 1px 4px 0px rgba(0, 0, 0, 0.25)',
      },
    }}
    {...props}
    ref={ref}
  />
));

function SearchInput({ className, mode, placeholder, btnText, query, onType, onSearch }) {
  const isSimpleMode = mode === SEARCH_INPUT_MODES.simple;
  const isManualMode = mode === SEARCH_INPUT_MODES.manual;
  const hasBtn = isSimpleMode || isManualMode;

  const debouncedOnType = useCallback(_.debounce(onType, 250), [onType]);

  return (
    <form className={clsx('flex items-center gap-20', className)}>
      <StyledTextField
        type="text"
        variant="outlined"
        className="w-full bourder-0"
        defaultValue={query}
        placeholder={placeholder ?? ''}
        onChange={debouncedOnType}
      />

      {/* {isManualMode && <Select />} */}

      {hasBtn && (
        <Button
          variant="contained"
          color="inherit"
          className="text-center text-base text-primary-light font-semibold  tracking-widest uppercase rounded-2xl bg-secondary-light shadow hover:shadow-hover hover:shadow-secondary-light ease-in-out duration-300"
          aria-label={btnText ?? ''}
          type="button"
          size="large"
          onClick={onSearch}
        >
          {btnText}
        </Button>
      )}
    </form>
  );
}

export default memo(SearchInput);