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

import { useThemeHooks } from '@redocly/theme/core/hooks';
import { SearchIcon } from '@redocly/theme/icons/SearchIcon/SearchIcon';

export type FilterInputProps = {
  value: string;
  onChange: (newValue: string) => void;
};

export function FilterInput(props: FilterInputProps): JSX.Element {
  const { value, onChange } = props;

  const { useTranslate } = useThemeHooks();
  const { translate } = useTranslate();

  return (
    <InputWrapper data-component-name="Filter/FilterInput">
      <InputIcon />
      <Input
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={translate('catalog.filters.placeholder', 'Type to filter...')}
      />
    </InputWrapper>
  );
}

const InputWrapper = styled.div`
  position: relative;
`;

const InputIcon = styled(SearchIcon)`
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: var(--spacing-sm);
  color: var(--input-content-placeholder-color);
`;

const Input = styled.input`
  border: var(--filter-input-border);
  min-width: var(--filter-input-min-width);
  width: 100%;
  outline: none;
  padding: var(--filter-input-padding);
  border-radius: var(--filter-input-border-radius);
  background-color: var(--filter-input-bg-color);
  color: var(--filter-input-color);
  font-family: var(--filter-input-font-family);
  font-size: var(--filter-input-font-size);
  line-height: var(--filter-input-line-height);

  &::placeholder {
    opacity: var(--filter-input-placeholder-opacity);
    color: var(--filter-input-placeholder-color);
  }

  &:hover {
    color: var(--filter-input-color-hover);
    border: var(--filter-input-border-hover);
  }

  &:focus {
    color: var(--filter-input-color-focus);
    border: var(--filter-input-border-focus);
  }

  &:-webkit-autofill {
    background-color: var(--filter-input-bg-color);
  }
`;