kedaimaster/src/components/Item.js

import React, { useState, useRef, useEffect } from "react";
import styles from "./Item.module.css";
const Item = ({
  blank,
  forCart,
  forInvoice,
  portrait,
  hideDetails,
  name: initialName,
  description: initialDescription,
  price: initialPrice,
  promoPrice,
  qty: initialQty,
  imageUrl,
  imageFile,
  id,
  onPlusClick,
  onNegativeClick,
  handleCreateItem,
  handleUpdateItem,
  onRemoveClick,
  isAvailable,
  isBeingEdit,
  last
}) => {
  const [selectedImage, setSelectedImage] = useState(imageFile);
  const [previewUrl, setPreviewUrl] = useState(imageUrl);
  const [itemQty, setItemQty] = useState(blank ? 0 : initialQty);
  const [itemName, setItemName] = useState(initialName);
  const [itemPrice, setItemPrice] = useState(initialPrice);
  const [itemDescription, setItemDescription] = useState(initialDescription);
  const fileInputRef = useRef(null);

  useEffect(() => {
    console.log(imageUrl);
    console.log(selectedImage);
    console.log(imageFile)
    if (imageFile) {
      setPreviewUrl(imageFile);
    } else {
      setPreviewUrl(imageUrl);
    }
  }, [imageFile, imageUrl]);

  const handlePlusClick = () => {
    if (!blank) onPlusClick(id);
    setItemQty(itemQty + 1);
  };

  const handleNegativeClick = () => {
    if (itemQty > 0) {
      if (!blank) onNegativeClick(id);
      setItemQty(itemQty - 1);
    }
  };

  const handleCreate = () => {
    handleCreateItem(itemName, itemPrice, selectedImage, previewUrl, itemDescription, promoPrice);
  };
  const handleUpdate = () => {
    handleUpdateItem(itemName, itemPrice, selectedImage, itemDescription, promoPrice);
  };

  const handleRemoveClick = () => {
    onRemoveClick(id);
  };

  const handleImageClick = () => {
    fileInputRef.current.click();
  };

  const handleFileChange = (event) => {
    const file = event.target.files[0];
    if (file) {
      setSelectedImage(file);
    }
  };

  const formatCurrency = (value) => {
    const num = Number(value) || 0;
    return num.toLocaleString('id-ID');
  };

  const handlePriceChange = (event) => {
    setItemPrice(event.target.value);
  };

  const handleQtyChange = (event) => {
    const newQty = parseInt(event.target.value, 10);
    if (!isNaN(newQty)) {
      setItemQty(newQty);
    }
  };

  const handleNameChange = (event) => {
    setItemName(event.target.value);
  };

  const toTitleCase = (str) => {
    if (!str) return str;
    return String(str)
      .toLowerCase()
      .replace(/(^|[\s\-/'])([a-zA-Z\u00C0-\u024F])/g, (m, p1, p2) => p1 + p2.toUpperCase());
  };

  const displayName = toTitleCase(itemName);

  return (
    <div className={`${(!portrait && !last && !forInvoice) ? styles.notLast : ""}`}>
      <div className={`${styles.item} ${forInvoice ? styles.itemInvoice : ""} ${portrait ? styles.itemPortrait : ""} `}>
        {!forInvoice && (
          <div className={styles.imageWrap}>
            <img
              src={previewUrl}
              onError={({ currentTarget }) => {
                currentTarget.onerror = null;
                currentTarget.src =
                  "https://png.pngtree.com/png-vector/20221125/ourmid/pngtree-no-image-available-icon-flatvector-illustration-pic-design-profile-vector-png-image_40966566.jpg";
              }}
              alt={itemName}
              style={{ filter: !isAvailable ? "grayscale(100%)" : "none" }}
              className={styles.imageContainer}
            />
            {promoPrice && promoPrice != 0 && promoPrice != '' && (
              <div className={styles.promoPill}>Promo</div>
            )}
            {portrait && (
              <>
                <div className={styles.overlayName}>{displayName}</div>
                <div className={styles.bottomOverlay}>
                  <div className={styles.overlayPriceCol}>
                    {(promoPrice && promoPrice != 0 && promoPrice != '') ? (
                      <>
                        <span className={styles.overlayOriginal}>Rp {formatCurrency(initialPrice)}</span>
                        <span className={styles.overlayPromo}>Rp {formatCurrency(promoPrice)}</span>
                      </>
                    ) : (
                      <span className={styles.overlayPromo}>Rp {formatCurrency(initialPrice)}</span>
                    )}
                  </div>
                  <div className={styles.qtyGroup}>
                    <button className={styles.qtyBtn} onClick={handleNegativeClick} aria-label="Kurangi">-</button>
                    <span className={styles.qtyVal}>{itemQty}</span>
                    <button className={styles.qtyBtn} onClick={handlePlusClick} aria-label="Tambah">+</button>
                  </div>
                </div>
              </>
            )}
          </div>
        )}
        {forInvoice && (
          <div className={styles.itemDetails}>
            <div className={styles.plusNegative2} onClick={onRemoveClick}>⌧</div>
            <p className={styles.multiplySymbol}>x</p>
            <p className={styles.qtyInvoice}>{itemQty}</p>
            <p className={styles.itemPriceInvoice}>Rp {formatCurrency(itemQty * (promoPrice > 0 ? promoPrice : itemPrice))}</p>
          </div>
        )}
        {forCart && (
          <div className={styles.remove} onClick={handleRemoveClick}>
            ⓧ
          </div>
        )}
      </div>
      {null}
    </div>
  );
};

export default Item;