import { useState, useEffect } from "react";
import { Cancel } from "@mui/icons-material";
import { TextField } from "@mui/material";
import { Box } from "@mui/system";
import { useStatusContext } from "../../Contexts/StatusContext";

const TextInput = ({ text, handleDelete }) => {
  return (
    <Box sx={{
      display: "flex",
      alignItems: "center",
      gap: "2px",
      p: "2px 4px",
      backgroundColor: "#ccc",
      borderRadius: 1,
    }}>
      {text}
      <Cancel
        sx={{
          color: "#666",
          fontSize: "16px",
          cursor: "pointer",
        }}
        onClick={() => handleDelete(text)}
      />
    </Box>
  );
}

const TextInputList = ({
  onChange = () => {},
  validate = () => {},
  label
}) => {
  const [textList, setTextList] = useState([]);
  const [input, setInput] = useState("");

  const { setMessage } = useStatusContext();

  const handleDelete = (textToDelete) => {
    setTextList(textList => textList.filter(text => text !== textToDelete));
  }

  const handleOnChange = (event) => {
    const char = event.nativeEvent.data;
    if (char === ",") {
      try {
        if (validate) validate(input);
        setTextList(textList => [...textList, input]);
        setInput("");
      } catch {
        setMessage(`"${input}" is not valid.`);
      }
    } else {
      setInput(event.target.value);
    }
  }

  useEffect(() => {
    onChange(input.length ? [...textList, input] : [...textList]);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [textList, input]);

  return (
    <div>
      <TextField
        data-testid="text-input-list"
        name="text"
        label={`${label} (use commas to add multiple)`}
        value={input}
        variant="outlined"
        margin="normal"
        required
        size="small"
        fullWidth
        onChange={handleOnChange}
      />

      <Box sx={{
        display: "flex",
        flexWrap: "wrap",
        gap: 1,
        pr: 1,
      }}>
        {textList.map((text) => (
          <TextInput
            text={text}
            handleDelete={handleDelete}
            key={text}
          />
        ))}
      </Box>
    </div>
  );
};

export default TextInputList;