plant address

import React, { Fragment } from "react";
import { Field } from "redux-form";
import { Button } from "react-bootstrap";

import { Dropdown, TextArea, Input, GPSLocation } from "../../../fields";
import { REGIONS, getProvinces, getCities } from "../../../../constants";

export default ({
    plantRegion,
    plantProvince,
    plantCity,
    plantAddress,
    plantgpsCoordinates,
    plantGeocodeAddress
}) => {
    return (
        <Fragment>
            <h4 className="my-3">Plant Address</h4>
            <hr />
            <Field
                component={Dropdown}
                label="Region"
                name="plantRegion"
                options={REGIONS}
                required
            />
            <Field
                component={Dropdown}
                label="Province"
                name="plantProvince"
                options={getProvinces(plantRegion)}
                disabled={!plantRegion}
                required
            />
            <Field
                component={Dropdown}
                label="City or Town"
                name="plantCity"
                options={getCities(plantProvince)}
                disabled={!plantProvince}
                required
            />
            <Field
                component={TextArea}
                label="Street Address"
                name="plantAddress"
                placeholder="Street Address"
                disabled={!plantCity}
                required
                note="The declared address shall be the same address indicated in the
        SEC/DTI/CDA permit. Otherwise, the declared address must be consistent
        with the one indicated in the business permit."
            />
            <Field
                component={Input}
                label="GPS Latitude"
                name="plantLat"
                type="text"
                placeholder="GPS Latitude"
                readOnly
                required
            />
            <Field
                component={Input}
                label="GPS Longitude"
                name="plantLon"
                type="text"
                placeholder="GPS Longitude"
                readOnly
                required
            />
            {plantgpsCoordinates.length === 0 ? (
                <Button
                    block
                    variant="outline-primary"
                    className="my-3"
                    onClick={() =>
                        plantGeocodeAddress({ plantProvince, plantCity })
                    }
                    disabled={
                        !plantRegion || !plantProvince || !plantCity || !plantAddress
                    }
                >
                    <i className="fas fa-map-marker-alt"></i> Get GPS
                    Coordinates
                </Button>
            ) : (
                <Field
                    component={GPSLocation}
                    name="plantGPS"
                    mapHeight={400}
                    note="Move the marker pin to accurately position your Plant Address"
                />
            )}
        </Fragment>
    );
};