import React, { useState, useRef, useEffect } from "react";
import styles from "./Item.module.css";
const Item = ({
  blank,
  forCart,
  forInvoice,
  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);
  };
  const handleUpdate = () => {
    handleUpdateItem(itemName, itemPrice, selectedImage, previewUrl);
  };

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

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

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

  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);
  };

  return (
    <div className={`${!last ? styles.notLast : ""}`}>
      <div className={`${styles.item} ${forInvoice ? styles.itemInvoice : ""} `}>
        {!forInvoice && (
          // <div className={styles.imageContainer}>
          <img
            src={
              previewUrl
            }
            onError={({ currentTarget }) => {
              currentTarget.onerror = null; // prevents looping
              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}
          />
          // </div>
        )}
        <div className={styles.itemDetails}>
          {forInvoice &&
            <svg
              className={styles.plusNegative2}
              onClick={onRemoveClick}
              clipRule="evenodd"
              fillRule="evenodd"
              strokeLinejoin="round"
              strokeMiterlimit="2"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="m12.002 2c5.518 0 9.998 4.48 9.998 9.998 0 5.517-4.48 9.997-9.998 9.997-5.517 0-9.997-4.48-9.997-9.997 0-5.518 4.48-9.998 9.997-9.998zm0 1.5c-4.69 0-8.497 3.808-8.497 8.498s3.807 8.497 8.497 8.497 8.498-3.807 8.498-8.497-3.808-8.498-8.498-8.498zm-.747 7.75h-3.5c-.414 0-.75.336-.75.75s.336.75.75.75h3.5v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5h3.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-3.5v-3.5c0-.414-.336-.75-.75-.75s-.75.336-.75.75z"
                fillRule="nonzero"
              />
            </svg>

          }
          {/* <input
          className={`${
            forInvoice ? styles.itemInvoiceName : styles.itemName
          } ${isBeingEdit || blank ? styles.blank : styles.notblank} ${
            !isAvailable ? styles.disabled : ""
          }`}
          value={itemName}
          placeholder="Nama item"
          onChange={handleNameChange}
          disabled={!blank && !isBeingEdit}
        /> */}
          <h3 style={{
            textTransform: 'capitalize',
            margin: '5px 0px 10px 10px',
            fontSize: '16px',
            display: '-webkit-box',
            WebkitBoxOrient: 'vertical',
            overflow: 'hidden',
            WebkitLineClamp: 2,
            textOverflow: 'ellipsis'
          }}>
            {itemName}
          </h3>
          {forInvoice && (
            <>
              <p className={styles.multiplySymbol}>x</p>
              <p className={styles.qtyInvoice}>{itemQty}</p>
            </>
          )}
          {!forInvoice && (
            // <input
            //   className={`${styles.itemPrice} ${
            //     isBeingEdit || blank ? styles.blank : styles.notblank
            //   } ${!isAvailable ? styles.disabled : ""}`}
            //   value={itemPrice}
            //   placeholder="Harga"
            //   onChange={handlePriceChange}
            //   disabled={!blank && !isBeingEdit}
            // />

            <div style={{
              display: 'flex',
              flexWrap: 'wrap',
              alignItems: 'center',
              color: 'rgb(28, 29, 29)',
              fontSize: '0.875rem',
              fontWeight: 600,
              lineHeight: '1rem',
              marginLeft: 10
            }}>
              {promoPrice && promoPrice != 0 && promoPrice != '' ?
                <>
                  <div style={{
                    position: 'relative',
                    marginTop: '0.125rem',
                    display: 'flex',
                    width: '87px',
                    alignItems: 'center',
                    whiteSpace: 'nowrap',
                    borderRadius: '9999px',
                    backgroundImage: 'linear-gradient(to right, #e52535, #eb525e)',
                    padding: '0.25rem 0rem',
                    color: 'rgb(255, 255, 255)',
                    fontSize: '0.75rem',
                    fontWeight: 600,
                    lineHeight: '1rem',
                    justifyContent: 'center'
                  }}>
                    Promo {(((initialPrice - promoPrice) / initialPrice) * 100).toFixed(0)}%
                  </div>

                  <div style={{ display: 'flex' }}>
                    <span style={{
                      marginLeft: '1rem',
                      marginRight: '0.5rem',
                      marginTop: '0.125rem'
                    }}>{promoPrice}</span>
                    <span style={{
                      marginTop: '0.125rem',
                      color: 'rgb(114, 114, 114)',
                      textDecoration: 'line-through'
                    }}>{initialPrice}</span>
                  </div>
                </>
                :
                <>

                  <div style={{ display: 'flex' }}>
                    <span style={{
                      marginRight: '0.5rem',
                      marginTop: '0.125rem'
                    }}>{initialPrice}</span>
                  </div>
                </>
              }
            </div>
          )}

          {!forInvoice &&
            (!isBeingEdit && itemQty != 0 ? (
              <div className={styles.itemQty}>
                <svg
                  className={styles.plusNegative}
                  onClick={handleNegativeClick}
                  clipRule="evenodd"
                  fillRule="evenodd"
                  strokeLinejoin="round"
                  strokeMiterlimit="2"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m12.002 2.005c5.518 0 9.998 4.48 9.998 9.997 0 5.518-4.48 9.998-9.998 9.998-5.517 0-9.997-4.48-9.997-9.998 0-5.517 4.48-9.997 9.997-9.997zm0 1.5c-4.69 0-8.497 3.807-8.497 8.497s3.807 8.498 8.497 8.498 8.498-3.808 8.498-8.498-3.808-8.497-8.498-8.497zm4.253 7.75h-8.5c-.414 0-.75.336-.75.75s.336.75.75.75h8.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75z"
                    fillRule="nonzero"
                  />
                </svg>
                {!blank && !isBeingEdit ? (
                  <p className={styles.itemQtyValue}>{itemQty}</p>
                ) : (
                  <input
                    className={styles.itemQtyInput}
                    value={itemQty}
                    onChange={handleQtyChange}
                    disabled={!blank && !isBeingEdit}
                  />
                )}
                <svg
                  className={styles.plusNegative}
                  onClick={handlePlusClick}
                  clipRule="evenodd"
                  fillRule="evenodd"
                  strokeLinejoin="round"
                  strokeMiterlimit="2"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m12.002 2c5.518 0 9.998 4.48 9.998 9.998 0 5.517-4.48 9.997-9.998 9.997-5.517 0-9.997-4.48-9.997-9.997 0-5.518 4.48-9.998 9.997-9.998zm0 1.5c-4.69 0-8.497 3.808-8.497 8.498s3.807 8.497 8.497 8.497 8.498-3.807 8.498-8.497-3.808-8.498-8.498-8.498zm-.747 7.75h-3.5c-.414 0-.75.336-.75.75s.336.75.75.75h3.5v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5h3.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-3.5v-3.5c0-.414-.336-.75-.75-.75s-.75.336-.75.75z"
                    fillRule="nonzero"
                  />
                </svg>
              </div>
            ) : !blank && !isBeingEdit ? (
              <div className={styles.itemQty}>
                <button
                  className={styles.addButton}
                  style={{ backgroundColor: !isAvailable ? "" : "inherit", border: `2px solid ${isAvailable ? 'inherit' : 'gray'}`, color: `${isAvailable ? '#a8c7a9' : 'gray'}` }}
                  onClick={handlePlusClick}
                  disabled={!isAvailable} // Optionally disable the button if not available
                >
                  Pesan
                </button>
              </div>
            ) : (
              <div className={styles.itemQty}>
                <button
                  className={styles.addButton}
                  style={{
                    backgroundColor: "white",
                    width: "150px",
                    color: '#a8c7a9'
                  }}
                  onClick={isBeingEdit ? handleUpdate : handleCreate}
                >
                  {isBeingEdit ? "Simpan" : "Buat"}
                </button>
              </div>
            ))}

          {forInvoice && (
            <p className={styles.itemPriceInvoice}>Rp {itemQty * (promoPrice > 0? promoPrice : itemPrice)}</p>
          )}
        </div>
        {forCart && (
          <div className={styles.remove} onClick={handleRemoveClick}>
            ⓧ
          </div>
        )}
        {/* {blank && (
        <button className={styles.createItem} onClick={handleCreate}>
          Create Item
        </button>
      )} */}
      </div>
      {itemDescription && itemDescription != 'undefined' && itemDescription?.length &&
        <div>
          <p style={{
            maxHeight: '34px',
            display: '-webkit-box',
            WebkitBoxOrient: 'vertical',
            overflow: 'hidden',
            WebkitLineClamp: 2,
            textOverflow: 'ellipsis', color: '#5f5f5f', fontSize: '14px', padding: '5px', margin: 0
          }}>{itemDescription}</p>
        </div>
      }
    </div>
  );
};

export default Item;