/**
 * It's common (top-side) details object which exist on each object details view.
 * Here should be passed the gotten from API details.
 */
import type { ProductViewModel } from "@/core/types/dto";
import type { UploadedTexture } from "@/core/redux/customization";

import { useCallback, useState, type JSX } from "react";
import { addFavourites, removeFavourites } from "@/app/(visualization)/project/@modals/(.)customization/_actions/favourites";
import { useAppSession } from "@/core/utils/hooks/useAppSession";

import Image from "next/image";
import Favourite from "@/core/components/Icons/Favourite";

interface CommonDetailsProps extends Partial<ProductViewModel> {
  uploaded?: UploadedTexture | null;
  isFavourite: boolean;
}

export default function CommonDetails(props: Readonly<CommonDetailsProps>): JSX.Element {
  const name = props.uploaded?.uploaded ? props.uploaded.uploaded.textureName : props?.name;
  const image = props.uploaded?.uploaded ? props.uploaded.uploaded.loadUrl : props?.image;
  const [processing, setProcessing] = useState<boolean>(false);
  const session = useAppSession();
  const [favorite, setFavorite] = useState<boolean>(props.isFavourite);

  const handleFavourites = useCallback(async (id: string) => {
    setProcessing(true);
    if (!props.isFavourite) {
      const response = await addFavourites(session.data?.user.id || "", id);
      setFavorite(response);
    } else {
      const response = await removeFavourites(session.data?.user.id || "", id);
      setFavorite(!response);
    }
    setProcessing(false);
  }, [props.isFavourite]);

  return (
    <div className={"w-full h-[125px] flex items-center gap-5 overflow-y-hidden"}>
      <div className={"rounded-[10px] w-[125px] h-[125px] overflow-hidden relative"}>
        {(image && name) && (
          <Image src={image} alt={name}
            width={0} height={0}
            sizes={"100vw"}
            className={"rounded-[10px] w-full h-full"} />
        )}
        {(!props.uploaded && props._id) && (
          <Favourite selected={favorite}
            onChange={handleFavourites.bind(globalThis, props._id)}
            className={`absolute right-[10px] top-[12px]`}
            processing={processing} />
        )}
        {!image && !name && (<div className={"w-full h-full bg-grey-400"} />)}
      </div>
      {/* TODO: the keys could be different, so it should be improved for independent displaying */}
      <div
        className={`
          flex-1 flex flex-col justify-start gap-2.5 
          ${/*h-full*//* It's temporary height due empty data */ "h-[88px]"}
        `}>
        <p className={"text-[12px]"}>
          <span className={"font-semibold text-dark-900"}>Name: </span>
          <span className={"text-dark-900 text-opacity-60"}>{name}</span>
        </p>
        {props.uploaded?.uploaded && (
          <p className={"text-[12px]"}>
            <span className={"font-semibold text-dark-900"}>Size: </span>
            <span className={"text-dark-900 text-opacity-60"}>
              {props.uploaded?.uploaded.width}x{props.uploaded?.uploaded.height}
            </span>
          </p>
        )}
        <p className={`text-[12px] ${props.uploaded?.uploaded ? "!hidden" : ""}`}>
          <span className={"font-semibold text-dark-900"}>Brand: </span>
          <span className={"text-dark-900 text-opacity-60"}>{props.brand}</span>
        </p>
        <p className={`text-[12px] ${props.uploaded?.uploaded ? "!hidden" : ""}`}>
          <span className={"font-semibold text-dark-900"}>Price: </span>
          <span className={"text-dark-900 text-opacity-60"}>{props.price}</span>
        </p>
        {/*{Object.keys(props.properties).map(p => (*/}
        {/*  <p key={p} className={"text-[12px]"}>*/}
        {/*    <span className={"font-semibold text-dark-900"}>{capitalize(p)}: </span>*/}
        {/*    <span className={"text-dark-900 text-opacity-60"}>{props.properties[p]}</span>*/}
        {/*  </p>*/}
        {/*))}*/}
      </div>
    </div>
  );
}