import { Badge, Col, Tag, Tooltip } from "antd";
import PropTypes from "prop-types";
import { AppointmentPropType } from "../../../../../Types/appointmentPropType.js";
import { ScheduledAppointmentPropType } from "../../../../../Types/scheduledAppointmentPropType.js";
import useCalendarCellUI from "./useCalendarCellUI.js";

const CalendarCell = ({ allAppointments, onCellClick, onItemClick }) => {
    const {
        containerRef,
        isCompressed,
        containerStyle,
        listStyle,
        columnStyle,
        tagStyle,
        badgeTextStyle,
        compressedCountStyle,
        getTooltipTitle,
        getBadgeText,
        getTagColor,
        getBadgeStatus,
    } = useCalendarCellUI();

    return (
        <div
            ref={containerRef}
            onClick={isCompressed ? onCellClick : undefined}
            style={containerStyle}
        >
            {!isCompressed && (
                <ul style={listStyle}>
                    {allAppointments.map((app) => (
                        <Col key={app.id} style={columnStyle}>
                            <Tooltip title={getTooltipTitle(app)}>
                                <Tag
                                    color={getTagColor(!!app.appointment_datetime)}
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        onItemClick(app);
                                    }}
                                    style={tagStyle}
                                >
                                    <Badge
                                        status={getBadgeStatus(!!app.appointment_datetime)}
                                        text={
                                            <span style={badgeTextStyle}>
                        {getBadgeText(app)}
                      </span>
                                        }
                                    />
                                </Tag>
                            </Tooltip>
                        </Col>
                    ))}
                </ul>
            )}
            {isCompressed && (
                <div style={compressedCountStyle}>
                    {allAppointments.length > 0 && `+${allAppointments.length}`}
                </div>
            )}
        </div>
    );
};

CalendarCell.propTypes = {
    allAppointments: PropTypes.arrayOf(
        PropTypes.oneOfType([AppointmentPropType, ScheduledAppointmentPropType])
    ).isRequired,
    onCellClick: PropTypes.func.isRequired,
    onItemClick: PropTypes.func.isRequired,
};

export default CalendarCell;