import React from 'react';
import styled from 'styled-components';

import type { ChangeEvent, JSX, SyntheticEvent } from 'react';

import { SearchIcon } from '@redocly/theme/icons/SearchIcon/SearchIcon';
import { Spinner } from '@redocly/theme/icons/Spinner/Spinner';
import { Button } from '@redocly/theme/components/Button/Button';
import { useInputKeyCommands, useRecentSearches, useThemeHooks } from '@redocly/theme/core/hooks';
import { CloseFilledIcon } from '@redocly/theme/icons/CloseFilledIcon/CloseFilledIcon';
import { ChevronLeftIcon } from '@redocly/theme/icons/ChevronLeftIcon/ChevronLeftIcon';

export type SearchInputProps = {
  placeholder?: string;
  value: string;
  onChange: (value: string) => void;
  inputRef?: React.RefObject<HTMLInputElement | null>;
  isLoading: boolean;
  showReturnButton?: boolean;
  onReturn?: () => void;
  onSubmit?: (evt: React.KeyboardEvent<HTMLInputElement>) => void;
  className?: string;
};

export function SearchInput({
  placeholder,
  value,
  onChange,
  isLoading,
  showReturnButton,
  inputRef,
  onReturn,
  onSubmit,
  className,
}: SearchInputProps): JSX.Element {
  const { useTelemetry } = useThemeHooks();
  const { addSearchHistoryItem } = useRecentSearches();
  const telemetry = useTelemetry();

  const { onKeyDown } = useInputKeyCommands({
    onEnter: (event) => onSubmit?.(event),
    onClear: () => addSearchHistoryItem(value),
  });

  const stopPropagation = (event: SyntheticEvent) => event.stopPropagation();

  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
    onChange(event.target.value);
  };

  const handleOnReset = () => {
    onChange('');
    addSearchHistoryItem(value);
    telemetry.sendSearchInputResetButtonClickedMessage();
  };

  return (
    <SearchInputWrapper data-component-name="Search/SearchInput" className={className}>
      {showReturnButton ? (
        <Button icon={<ChevronLeftIcon />} onClick={onReturn} />
      ) : value && isLoading ? (
        <Spinner size="24px" color="--search-input-icon-color" />
      ) : (
        <SearchIcon size="24px" color="--search-input-icon-color" />
      )}
      <SearchInputField
        value={value}
        ref={inputRef}
        placeholder={placeholder}
        onChange={handleOnChange}
        onClick={stopPropagation}
        onKeyDown={onKeyDown}
      />
      {!!value && (
        <ResetButton
          variant="ghost"
          onClick={handleOnReset}
          icon={<CloseFilledIcon />}
          tabIndex={-1}
        />
      )}
    </SearchInputWrapper>
  );
}

const SearchInputWrapper = styled.div`
  display: flex;
  flex-grow: 1;
  align-items: center;
  padding: var(--search-input-padding);
  height: var(--search-input-height);
  gap: var(--search-input-gap);
`;

const SearchInputField = styled.input`
  width: 100%;
  outline: none;
  background-color: var(--search-input-bg-color);
  border-radius: var(--search-input-border-radius);
  border: var(--search-input-border);
  color: var(--search-input-text-color);
  font-size: var(--search-input-font-size);
  font-family: var(--search-input-font-family);
  font-weight: var(--search-input-font-weight);
  line-height: var(--search-input-line-height);

  &::placeholder {
    color: var(--search-input-placeholder-color);
  }
`;

const ResetButton = styled(Button)`
  color: var(--color-warm-grey-5);
`;