import { useEffect, useState } from 'react';
import InputAdornment from '@mui/material/InputAdornment';
import TextField from '@mui/material/TextField';
import Search from '@mui/icons-material/Search';

function Component({callback}) {
  const [searchValue, setSearchValue] = useState("");

  const updateSearch = event => {
    var value = event.target.value;
    setSearchValue(value);
    parseSearch(value);
  }

  const parseSearch = value => {
    var zip = 0;
    var findZip = value.match(/[0-9]{4}/g);
    if (findZip) {
      zip = parseInt(findZip[0]);
    }

    var city = "";
    var findCity = value.replace(/[0-9]/g, '');
    if (findCity.length > 0) {
      city = findCity.trim();
    }

    callback(value, zip, city);
  }

  useEffect(() => {
    const paramsString = window.location.search;
    const searchParams = new URLSearchParams(paramsString);
    const value = searchParams.get("s");

    if (value && value.length > 0) {
      setSearchValue(value);
      parseSearch(value);
    }
  }, []);

  return (
    <>
      <TextField
        label="Rechercher un code postal ou une localité"
        variant="outlined"
        onChange={updateSearch}
        value={searchValue}
        slotProps={{
          input: {
            startAdornment: (
              <InputAdornment position="start">
                <Search />
              </InputAdornment>
            )
          }
        }}
        sx={{
          width: "100%",
          marginTop: "1.5rem",
          marginBottom: "1.5rem"
        }}
      />
    </>
  );
}

export default Component;