import LocationOnIcon from '@mui/icons-material/LocationOn';
import React, { forwardRef } from 'react';
import { Autocomplete, InputAdornment, TextField } from '@mui/material';

const LocationAutocomplete = forwardRef(({ setAppId, setLocoName, setPage, sx, textfeildSx }, ref) => {
  const locations = JSON.parse(localStorage.getItem('applocations') || '[]');

  return (
    <Autocomplete
      id="location-autocomplete"
      options={locations || []}
      getOptionLabel={(option) => option?.locationname ?? ''}
      sx={{ ...sx }}
      onChange={(event, value, reason) => {
        if (reason === 'clear') {
          setAppId?.(0);
          setLocoName?.('');
          setPage?.(0);
        } else if (value) {
          setAppId?.(value.applocationid);
          setLocoName?.(value.locationname);
          setPage?.(0);
        }
      }}
      renderInput={(params) => <TextField {...params} inputRef={ref} label={'Select Zones'} sx={{ ...textfeildSx }} />}
    />
  );
});

export default LocationAutocomplete;