// @flow
import { SearchIcon } from "outline-icons";
import * as React from "react";
import styled, { withTheme } from "styled-components";
import Flex from "components/Flex";
import { type Theme } from "types";

type Props = {
  onChange: (string) => void,
  defaultValue?: string,
  placeholder?: string,
  theme: Theme,
};

class SearchField extends React.Component<Props> {
  input: ?HTMLInputElement;

  componentDidMount() {
    if (this.props && this.input) {
      // ensure that focus is placed at end of input
      const len = (this.props.defaultValue || "").length;
      this.input.setSelectionRange(len, len);
    }
  }

  handleChange = (ev: SyntheticEvent<HTMLInputElement>) => {
    this.props.onChange(ev.currentTarget.value ? ev.currentTarget.value : "");
  };

  focusInput = (ev: SyntheticEvent<>) => {
    if (this.input) this.input.focus();
  };

  render() {
    return (
      <Field align="center">
        <StyledIcon
          type="Search"
          size={46}
          color={this.props.theme.textTertiary}
          onClick={this.focusInput}
        />
        <StyledInput
          {...this.props}
          ref={(ref) => (this.input = ref)}
          onChange={this.handleChange}
          spellCheck="false"
          placeholder={this.props.placeholder}
          type="search"
          autoFocus
        />
      </Field>
    );
  }
}

const Field = styled(Flex)`
  position: relative;
  margin-bottom: 8px;
`;

const StyledInput = styled.input`
  width: 100%;
  padding: 10px 10px 10px 60px;
  font-size: 36px;
  font-weight: 400;
  outline: none;
  border: 0;
  background: ${(props) => props.theme.sidebarBackground};
  transition: ${(props) => props.theme.backgroundTransition};
  border-radius: 4px;

  color: ${(props) => props.theme.text};

  ::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }
  ::-webkit-input-placeholder {
    color: ${(props) => props.theme.placeholder};
  }
  :-moz-placeholder {
    color: ${(props) => props.theme.placeholder};
  }
  ::-moz-placeholder {
    color: ${(props) => props.theme.placeholder};
  }
  :-ms-input-placeholder {
    color: ${(props) => props.theme.placeholder};
  }
`;

const StyledIcon = styled(SearchIcon)`
  position: absolute;
  left: 8px;
`;

export default withTheme(SearchField);