/**
 * TEAM: frontend_infra
 *
 * @flow
 */

import * as React from "react";
import {css, StyleSheet} from "aphrodite";
import colors from "../colors";

type Props = {
  +value: any,
  +onChange: ({|value: string | number, label: string|}) => void,
  ...
};

type State = {value: string, ...};

class TestAlgoliaField extends React.PureComponent<Props, State> {
  state: State = {
    value: "",
  };

  render(): React.Element<"input"> {
    return (
      <input
        value={this.state.value}
        onChange={this.handleChange}
        className={this.props.value ? css(styles.lightGreenBackground) : null}
      />
    );
  }

  handleChange: (event: SyntheticInputEvent<HTMLInputElement>) => void = (
    event: SyntheticInputEvent<HTMLInputElement>
  ) => {
    // eslint-disable-next-line prefer-destructuring
    const value = event.currentTarget.value;
    this.setState({value}, this.syncValue);
  };

  syncValue: () => void = () => {
    let jsonValue = null;
    try {
      jsonValue = JSON.parse(this.state.value);
    } catch (e) {
      // Do nothing
      return;
    }

    // $FlowFixMe[prop-missing]: full is not typed here
    this.props.onChange({
      value: "value",
      label: "label",
      full: jsonValue,
    });
  };
}

const styles = StyleSheet.create({
  lightGreenBackground: {
    backgroundColor: `lighten(${colors.green30}, 10%)`,
  },
});

export default TestAlgoliaField;