VogelSocialMedia/code/frontend/src/pages/postCreation/PostCreation.tsx

import { useState, useEffect, useRef } from "react";
import { useNavigate } from "react-router-dom";
import {
  Box,
  Card,
  CardMedia,
  CardActionArea,
  IconButton,
  Typography,
} from "@mui/material";
import Chip from "@mui/material/Chip";
import Autocomplete from "@mui/material/Autocomplete";
import TextField from "@mui/material/TextField";
import CloseIcon from "@mui/icons-material/Close";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import api from "../../api/axios";
import { useAuth } from "../../api/Auth";
import ButtonPrimary from "../../components/buttons/buttonRotkehlchen/ButtonRotkehlchen";
import "./postCreation.css";

const theme = createTheme({
  palette: {
    primary: {
      main: "#e79a0e;",
    },
  },
});

function PostCreation() {
  const { user } = useAuth();
  interface ImageItem {
    src: string;
    title: string;
  }
  const [isSend, setIsSend] = useState<boolean>(false);
  const [options, setOptions] = useState<string[]>([]);
  const [tags, setTags] = useState<string[]>([]);
  const [description, setDescription] = useState<string>("");
  const [selectedImage, setSelectedImage] = useState<string>();

  const [data, setData] = useState<ImageItem[]>([]);
  const navigate = useNavigate();

  const [fileList, setFileList] = useState<File[]>([]);
  const inputFile = useRef<HTMLInputElement | null>(null);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const res = await api.get<string[]>("/posts/tags"); // GET /api/posts/tags
        if (!cancelled) setOptions(res.data);
      } catch (err) {
        console.log(err);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, []);

  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    setDescription(event.target.value);
  };

  const handleTags = (event: any, newValue: string[]) => {
    newValue.forEach((val) => {
      if (!options.includes(val)) {
        setOptions((prev) => [...prev, val]);
      }
    });
    setTags(newValue);
  };

  const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files;
    if (files && files.length > 0) {
      const fileArr = Array.from(files);
      const newItems: ImageItem[] = Array.from(files).map((file) => ({
        src: URL.createObjectURL(file),
        title: file.name,
      }));

      const lastImageUrl = newItems[newItems.length - 1].src;

      setData((prev) => [...prev, ...newItems]);
      setSelectedImage(lastImageUrl);
      setFileList((prev) => [...prev, ...fileArr]);
    }
  };
  const onEmptyImgClick = () => {
    if (inputFile.current) {
      inputFile.current?.click();
    }
  };
  const handleDelete = (idx: number) => {
    setData((prev) => prev.filter((_, i) => i !== idx));
    if (idx - 1 < 0) {
      if (data.length == 1) {
        setSelectedImage("");
      } else {
        setSelectedImage(data[idx + 1].src);
      }
    } else {
      setSelectedImage(data[idx - 1].src);
    }
  };

  const onSubmit = async (event: React.FormEvent) => {
    if (!isSend) {
      setIsSend(true);

      event.preventDefault();
      if (!fileList) {
        return;
      }
      const fData = new FormData();
      files.forEach((file, i) => {
        fData.append(`images`, file, file.name);
      });
      fData.append("status", "PUBLIC");
      fData.append("description", description);
      tags.forEach((tag) => {
        fData.append("tags", tag);
      });

      try {
        await api.post("/posts/upload", fData);
        navigate(`/profile/${user?.username}`);
      } catch (error: any) {
        console.log(error);
      }
    }
  };
  const onCancel = () => {
    navigate(`/profile/${user?.username}`);
  };

  const files = fileList ? [...fileList] : [];

  return (
    <ThemeProvider theme={theme}>
      <div className="create-display">
        <div className="create-part">
          <form onSubmit={onSubmit}>
            <h1>Create Post</h1>
            <div className="create-layout">
              <div className="create-preview">
                {selectedImage ? (
                  <img
                    src={selectedImage}
                    className="create-post-image"
                    alt="Add an Image"
                  ></img>
                ) : (
                  <label
                    className="create-post-img-layer"
                    onClick={onEmptyImgClick}
                  >
                    <strong>Add Picture</strong>
                  </label>
                )}
              </div>
              <div className="create-post-desc">
                <h2>Description*</h2>
                <textarea
                  className="create-post-description"
                  value={description}
                  onChange={handleChange}
                  required
                ></textarea>
              </div>
              <Box
                className="strip"
                sx={{
                  display: "flex",
                  gap: 1,
                  py: 1,
                  overflowX: "auto",
                  overflowY: "hidden",
                  width: "100%",
                  maxWidth: { xs: "90vw", sm: "600px" },
                  mx: "auto",
                  scrollSnapType: "x mandatory",
                  "& > *": { scrollSnapAlign: "center" },
                  "::-webkit-scrollbar": { display: "none" },
                }}
              >
                {/* Upload card */}
                <Card
                  key="add"
                  variant="outlined"
                  sx={{
                    minWidth: 60,
                    width: 60,
                    height: 60,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    flexShrink: 0,
                  }}
                >
                  <label
                    style={{ cursor: "pointer", width: "100%", height: "100%" }}
                  >
                    <img
                      src="/assets/icons/add-plus.svg"
                      alt="Upload"
                      style={{ width: "100%", height: "100%" }}
                    />
                    <input
                      id="create-file-upload"
                      type="file"
                      accept="image/*"
                      multiple
                      onChange={handleImageUpload}
                      style={{ display: "none" }}
                      ref={inputFile}
                      required
                    />
                  </label>
                </Card>

                {/* Image cards */}
                {data.map((item, idx) => (
                  <Card
                    key={`${item.title}-${idx}`}
                    variant="outlined"
                    sx={{
                      position: "relative",
                      minWidth: 60,
                      width: 60,
                      height: 60,
                      flexShrink: 0,
                    }}
                    onClick={() => setSelectedImage(item.src)}
                  >
                    {/* Delete button */}
                    <IconButton
                      size="small"
                      onClick={(e) => {
                        e.stopPropagation();
                        handleDelete(idx);
                      }}
                      sx={{
                        position: "absolute",
                        top: 2,
                        right: 2,
                        backgroundColor: "background.paper",
                        zIndex: 1,
                      }}
                    >
                      <CloseIcon fontSize="small" />
                    </IconButton>

                    <CardActionArea sx={{ width: "100%", height: "100%" }}>
                      <CardMedia
                        component="img"
                        image={item.src}
                        alt={item.title}
                        sx={{
                          width: "100%",
                          height: "100%",
                          objectFit: "cover",
                        }}
                      />
                    </CardActionArea>
                  </Card>
                ))}
              </Box>

              <Autocomplete
                className="create-tags"
                multiple
                id="tags-filled"
                options={options}
                freeSolo
                value={tags}
                onChange={handleTags}
                sx={{ width: "100%" }}
                renderValue={(value: readonly string[], getItemProps) =>
                  value.map((tags: string, index: number) => {
                    const { key, ...itemProps } = getItemProps({ index });
                    return (
                      <Chip
                        variant="outlined"
                        label={tags}
                        key={key}
                        {...itemProps}
                      />
                    );
                  })
                }
                renderInput={(params) => (
                  <TextField
                    {...params}
                    variant="outlined"
                    color="primary"
                    label="Tags"
                    placeholder="Add Tags"
                  />
                )}
              />
              <div className="create-buttons">
                <ButtonPrimary
                  style="secondary"
                  label="Cancel"
                  type="button"
                  onClick={onCancel}
                ></ButtonPrimary>
                <ButtonPrimary
                  style="primary"
                  label="Post"
                  type="submit"
                ></ButtonPrimary>
              </div>
            </div>
          </form>
        </div>
      </div>
    </ThemeProvider>
  );
}
export default PostCreation;