import React, { useState, useEffect, useMemo } from 'react';
import TextField from '@mui/material/TextField';
import { Autocomplete } from '@mui/material';
import LocationOnIcon from '@mui/icons-material/LocationOn';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import { makeStyles } from '@mui/styles';
import throttle from 'lodash/throttle';
import { geocodeByPlaceId } from 'react-places-autocomplete';
import { useTranslation } from "react-i18next";
import { WEB_MAIN_COLOR, FONT_FAMILY } from "../common/sharedFunctions";
import { api } from 'common';
import uuid from 'react-native-uuid';
import { useSelector, } from "react-redux";

const useStyles = makeStyles((theme) => ({
  icon: {
    color: theme.palette.text.secondary,
    marginRight: theme.spacing(2),
  },
  inputRtl: {
    "& label": {
      right: 75,
      left: "auto",
      fontFamily: FONT_FAMILY,
    },
  },
  textField: props => ({
    "& label.Mui-focused": {
      color: WEB_MAIN_COLOR(props?.settings?.appCat),
    },
    "& .MuiOutlinedInput-root": {
      "&.Mui-focused fieldset": {
        borderColor: WEB_MAIN_COLOR(props?.settings?.appCat),
      },
    },
    "& input": {
      fontFamily: FONT_FAMILY,
    },
  }),
}));

export default function GoogleMapsAutoComplete(props) {
  const settings = useSelector((state) => state.settingsdata.settings);
  const classes = useStyles({settings});
  const [value, setValue] = useState(null);
  const [inputValue, setInputValue] = useState('');
  const [options, setOptions] = useState([]);
  const { t, i18n } = useTranslation();
  const isRTL = i18n.dir() === 'rtl';
  const {
    fetchPlacesAutocomplete
  } = api;
  const [UUID, setUUID] = useState();

  useEffect(()=>{
    const uuidv4 = uuid.v4()
    setUUID(uuidv4);
    return () => {
      setUUID(null);
    };
  },[]);


  const fetch = useMemo(
    () => throttle(async (searchKeyword, callback) => {
      if (searchKeyword) {
        const results = await fetchPlacesAutocomplete(searchKeyword, UUID);
        callback(results || []);
      }
    }, 200),
    [fetchPlacesAutocomplete, UUID]
  );

  useEffect(() => {
    let active = true;

    if (inputValue === '') {
      setOptions(value ? [value] : []);
      return;
    }

    fetch(inputValue, (results) => {
      if (active) {
        let newOptions = value ? [value] : [];
        if (results) {
          newOptions = [...newOptions, ...results];
        }
        setOptions(newOptions);
      }
    });

    return () => {
      active = false;
    };
  }, [value, inputValue, fetch]);

  return (
    <Autocomplete
      style={props.style}
      getOptionLabel={(option) => (typeof option === 'string' ? option : option.description)}
      filterOptions={(x) => x}
      options={options}
      autoComplete
      includeInputInList
      filterSelectedOptions
      value={props.value}
      onChange={(event, newValue) => {
        setOptions(newValue ? [newValue, ...options] : options);
        setValue(newValue);
        if (newValue && newValue.place_id) {
          geocodeByPlaceId(newValue.place_id)
            .then(results => {
              if (results.length > 0) {
                newValue.coords = { lat: results[0].geometry.location.lat(), lng: results[0].geometry.location.lng() };
                newValue.placeDetails = results[0];
              }
              props.onChange(newValue);
            })
            .catch(() => alert(t('google_places_error')));
        } else {
          props.onChange(newValue);
        }
      }}
      onInputChange={(event, newInputValue) => {
        setInputValue(newInputValue);
      }}
      renderInput={(params) => (
        <TextField
          {...params}
          label={props.placeholder}
          variant={props.variant}
          className={[isRTL ? classes.inputRtl : '', classes.textField].join(" ")}
          fullWidth
        />
      )}
      renderOption={(props, option) => (
        <li {...props}>
          <Grid container alignItems="center">
            <Grid item sx={{ display: 'flex', width: 44 }}>
              <LocationOnIcon sx={{ color: 'text.secondary' }} />
            </Grid>
            <Grid item sx={{ width: 'calc(100% - 44px)', wordWrap: 'break-word' }}>
              <Typography variant="body1" sx={{ fontFamily: FONT_FAMILY }}>
                {option.description || "No description"}
              </Typography>
            </Grid>
          </Grid>
        </li>
      )}
    />
  );
}