import React from "react";
import {UserType} from "~/types/UserType";
import ScheduleDayCardUserDish from "~/components/features/schedule/dayCard/ScheduleDayCardUserDish";
import { FilledScheduleType, ScheduleType } from "~/types/ScheduleType";
import { Link } from "react-router";
import {PencilSquareIcon} from "@heroicons/react/24/outline";
import useRoutes from "~/hooks/useRoutes";
import DateBadge from "~/components/features/schedule/dayCard/DateBadge";
import { DateTime } from "luxon"
import classNames from "classnames"

interface Props {
    schedule: ScheduleType|FilledScheduleType;
    users: UserType[];
}

const ScheduleDayCard = ({schedule, users}: Props) => {
    const routes = useRoutes()
    const isToday = DateTime.fromISO(schedule.date).toFormat("yyyy-LL-dd") == DateTime.now().toFormat("yyyy-LL-dd")

    const containerStyles = classNames(
        'w-full bg-gray-500 pt-5 pb-2 rounded-2xl text-xl', {
            'border-2 text-accent-blue border-accent-blue': isToday,
        }
    )

    return (
        <div className="relative flex pt-3 pr-2 w-full border-1 border-accent">
            <DateBadge date={schedule.date} />

            <div className={containerStyles}>
                {
                    users.map((user) => <ScheduleDayCardUserDish key={user.id} user={user} schedule={schedule}/>)
                }

                <div className="w-full mt-2 border-t-2 border-background">
                    <Link
                        className="w-full flex text-sm pr-3 pt-2"
                        aria-label="Edit dish"
                        to={routes.schedule.date.edit(schedule.date)}
                    >
                        <PencilSquareIcon className="h-5 w-5 mr-2 ml-auto" /> Edit
                    </Link>
                </div>
            </div>
        </div>
    );
};

export default ScheduleDayCard;