import * as React from 'react';
import styled from '@emotion/styled';
import { SpaceProps, FlexProps } from 'styled-system';

import { Flex } from '@lightspeed/flame/Core';
import { Button } from '@lightspeed/flame/Button';
import { Input } from '@lightspeed/flame/Input';
import { IconSearch } from '@lightspeed/flame/Icon/Search';
import { FilterContext } from './FilterContext';

// Target Button to place it above Input and remove its left `border-radius`.
// The negative margin-left hides the border-radius from the Input.
// TODO: target the Input wrapper directly and remove its `border-radius`.
const FlexButton = styled(Flex)`
  margin-left: -3px;

  > :first-of-type {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
`;

// Hack incoming:
// Export reference for Input wrapping Flex, so we can conditionnally
// apply styles in other files.
export const SearchInputFlex = styled(Flex)`
  flex: 1;

  /* TODO: move the reset to Cirrus mainline */
  input[type='search'] {
    -webkit-appearance: textfield;
  }

  /* TODO: move the reset to Cirrus mainline */
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none;
  }
` as React.FC<SpaceProps & FlexProps>;

interface Props {
  buttonText?: string;
  buttonTitle?: string;
  placeholder?: string;
  disabled?: boolean;
}
const SearchBar: React.FC<Props> = ({
  buttonText = 'Search',
  placeholder = 'Search in results...',
  buttonTitle = '',
  disabled,
}) => {
  const { applySearchTerm, getSearchTerm } = React.useContext(FilterContext);
  const searchTerm = getSearchTerm();
  const [searchInput, setSearchInput] = React.useState(searchTerm);

  React.useEffect(() => {
    setSearchInput(searchTerm);
  }, [searchTerm]);

  return (
    <Flex flex="1" className="cr-table-search-bar-form">
      <SearchInputFlex>
        <Input
          type="search"
          value={searchInput || ''}
          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
            setSearchInput(event.target.value);
          }}
          onKeyPress={e => {
            if (e.key === 'Enter') {
              applySearchTerm(searchInput);
            }
          }}
          placeholder={placeholder}
          disabled={disabled}
          prefix={<IconSearch name="search" color="disabled" />}
        />
      </SearchInputFlex>
      <FlexButton>
        <Button
          type="button"
          variant="secondary"
          title={buttonTitle || buttonText}
          disabled={disabled}
          onClick={() => applySearchTerm(searchInput)}
        >
          {buttonText}
        </Button>
      </FlexButton>
    </Flex>
  );
};

export { SearchBar };