import React from 'react';
import {Dayjs} from "dayjs";

type EventsPopupProps = {
    day:Dayjs
    events: any[]
    rect: any
}

const WIDTH = 500

const EventsPopup = ({events, rect, day}: EventsPopupProps) => {

    const offset = rect.left + rect.width / 2 + WIDTH / 2 - window.innerWidth + 50
    const translate = offset < 0 ? '-50%' : `calc(-50% - ${offset}px)`
    const leftP = offset < 0 ? '50%' : `calc(50% + ${offset}px)`

    return (
        <div
            className={`events-popup`}
            style={{
                width: `${WIDTH}px`,
                transform: `translateX(${translate})`
            }}>
            <div
                className="pointer"
                style={{
                    left: leftP
                }}
            ></div>
            <ul>
                <p>{day.format('DD-MMM-YYYY')}</p>
                {
                    events.map(ev =>
                        <li  key={ev.id}>

                            <p> {ev.name}</p>
                            <p> {ev.description}</p>

                        </li>
                    )
                }
            </ul>

        </div>
    );
}

export default EventsPopup;