import { useEffect, useState } from 'react';
import axios from 'axios';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import IconButton from '@mui/material/IconButton';
import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded';
import { useSnackbar } from 'notistack';

function Component({zip, city}) {
  const [zips, setZips] = useState([]);
  const { enqueueSnackbar, closeSnackbar } = useSnackbar();

  const fetchResults = (zip, city) => {
    city = encodeURIComponent(city);
    axios.get(`/api/query.php?zip=${zip}&city=${city}`)
      .then(function (response) {
        if (response.data.zips) {
          setZips(response.data.zips);
        }
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  const copyValue = (value) => {
    navigator.clipboard.writeText(value);
    enqueueSnackbar("Copié dans le presse-papier", {
      autoHideDuration: 2000,
      variant: "success",
      anchorOrigin: {
        vertical: "top",
        horizontal: "center"
      }
    });
  }

  useEffect(() => {
    if (zip > 0 || city.length >= 4) {
      fetchResults(zip, city);
    } else {
      setZips([]);
    }
  }, [zip, city]);

  return (
    <>
      <List sx={{ width: '100%' }}>
        {zips.map((zip, i) => {
          return (
            <ListItem
              key={i}
              secondaryAction={
                <IconButton
                  edge="end"
                  aria-label="Copier"
                  onClick={() => {copyValue(`${zip.zip} ${zip.city}`)}}
                >
                  <ContentCopyRounded />
                </IconButton>
              }
              disablePadding
            >
              <ListItemButton onClick={() => {copyValue(`${zip.zip} ${zip.city}`)}}>
                <ListItemText primary={`${zip.zip} ${zip.city}`} />
              </ListItemButton>
            </ListItem>
          );
        })}
      </List>
    </>
  );
}

export default Component;