import { Card, Col, Divider, Form, Input, Row } from "antd";
import { LocationSearchInput } from "./location-search";
import { geocodeByAddress, getLatLng } from "react-places-autocomplete";
import { FormComponentProps } from "antd/lib/form/Form";

type Props = {} & FormComponentProps;

type State = {
  address: string;
};

class SomeClass extends React.Component<Props, State> {
  state: State = {
    address: ""
  };

  clearAddress = (): void => {
    // Clear with this.props.form.setFieldsValue();
  };

  handleAddressChange = (address: string): void => {
    // Do something with address
  };

  handleAddressSelect = (address: string, placeID: string): void => {
    geocodeByAddress(address)
      .then(async (results: google.maps.GeocoderResult[]) => {
        // Do something with results[0]
        return getLatLng(results[0]);
      })
      .then((latLng: google.maps.LatLngLiteral) => {
        // Do something with latLng
      })
      .catch((error: any) => {
        console.error("Error", error);
      });
  };

  componentDidMount(): void {
    this.props.form.setFieldsValue({
      addressInput: ""
    });
  }

  render() {
    return (
      <Form>
        <Row>
          <Col>
            <FormItem>
              <span>Address</span>
              {getFieldDecorator("addressInput", {
                initialValue: "",
                rules: [{ required: false }]
              })(
                <LocationSearchInput
                  address={this.state.address}
                  clearAddress={this.clearAddress}
                  onChange={this.handleAddressChange}
                  onAddressSelect={this.handleAddressSelect}
                />
              )}
            </FormItem>
          </Col>
        </Row>
      </Form>
    );
  }
}

export const WrappedSomeClass = Form.create()(SomeClass);