import React from "react";
import "./Sidebar-calendar.scss";

type Month = {
    index: number;
    name: string;
    has_submitted?: boolean;
    isActive?: boolean;
    projects?: string[];
};

type SidebarCalendarAenaProps = {
    userId: number | string;
    year: number;
    months: Month[];
};

const SidebarCalendarAena = ({userId, year, months}: SidebarCalendarAenaProps) => {
    return (
        <div className="d-flex flex-column justify-content-start align-items-start calendar-sidebar mb-5">
            <h2 style={{fontSize:'18px'}} className="mb-3">{year}</h2>

            <div className="months">
                {months.map((m) => {
                    const projects = Array.isArray(m.projects) ? m.projects : [];

                    return (
                        <div key={`month-${userId}-${year}-${m.index}`}>
                            <div
                                className={[
                                    'month d-flex align-items-center',
                                    m.has_submitted === true ? 'is-okay' : '',
                                    m.has_submitted === false ? 'is-not-okay' : '',
                                    m.has_submitted === undefined ? 'disabled' : '',
                                ].filter(Boolean).join(' ')}
                            >
                                {m.has_submitted === true && <span className="dot green"></span>}
                                {m.has_submitted === false && <span className="dot orange"></span>}

                                <span className="tooltip-wrapper">
                                    <span className="month-name">{m.name}</span>
                                    <span className="tooltip-box">
                                        {projects.length > 0
                                            ? <>Συνδεδεμένα Έργα:<br/>{projects.join(', ')}</>
                                            : 'Δεν υπάρχουν Συνδεδεμένα Έργα'
                                        }
                                    </span>
                                </span>
                            </div>
                        </div>
                    );
                })}
            </div>
        </div>
    );
};

export default SidebarCalendarAena;