dishplanner/frontend/app/components/features/dishes/UserDishCard.tsx

import React, {useEffect} from "react";
import {DishType} from "~/types/DishType";
import {UserType} from "~/types/UserType";
import { Link } from "react-router";
import {PencilIcon, TrashIcon} from "@heroicons/react/24/solid";
import {removeUserFromDish} from "~/utils/api/dishApi";
import EditDishUserCardEditForm from "~/components/features/dishes/EditDishUserCardEditForm";
import {getUserDishForUserAndDish} from "~/utils/api/usersApi";
import Spinner from "~/components/Spinner";
import RecurrenceLabels from "~/components/features/dishes/RecurrenceLabels";
import {UserDishType} from "~/types/ScheduledUserDishType";

interface Props {
    dish: DishType
    user: UserType
    reloadDish: () => void
}

const UserDishCard = ({dish, user, reloadDish}: Props) => {
    const [userDish, setUserDish] = React.useState<UserDishType|null>(null);
    const [userDishLoading, setUserDishLoading] = React.useState(true);
    const [isEditMode, setIsEditMode] = React.useState(false);

    useEffect(() => {
        getUserDishForUserAndDish(user.id, dish.id)
            .then((userDish) => setUserDish(userDish))
            .finally(() => setUserDishLoading(false))
    }, [dish, user]);

    const handleRemove = () => {
        removeUserFromDish(dish.id, user.id)
            .then(() => reloadDish())
            .catch(() => {
                alert("Failed to remove user, please try again.");
            });
    };

    if (userDishLoading || !userDish) {
        return <Spinner />
    }

    const onUserCardSubmit = () => {
        setIsEditMode(false);
        reloadDish()
    }

    return (
        <div className="my-2 w-full px-3 py-2 text-xl font-bold border border-secondary rounded">
            <div className="flex gap-2">
                <div className="flex-none pt-1">
                    {user.name}
                </div>

                <div className="flex-grow pt-1">
                    <RecurrenceLabels recurrences={userDish.recurrences} />
                </div>

                <div className="flex-none w-8">
                    <Link onClick={() => setIsEditMode(!isEditMode)} to="#">
                        <div className="border border-foreground p-2 rounded">
                            <PencilIcon width="14"/>
                        </div>
                    </Link>
                </div>
                <div className="flex-none w-8">
                    <Link onClick={handleRemove} to="#">
                        <div className="border border-red-500 p-2 rounded">
                            <TrashIcon width="14" className="text-red-500"/>
                        </div>
                    </Link>
                </div>
            </div>

            {isEditMode && (
                <div className="flex gap-2">
                    <EditDishUserCardEditForm userDish={userDish} onSubmit={onUserCardSubmit} />
                </div>
            )}
        </div>
    );
}

export default UserDishCard;