import { Display } from 'ew-my-calendar/Display';
import { Playlist } from 'ew-my-calendar/Playlist';
import 'ew-my-calendar';

@customElement('my-calendar-view')
export class MyCalendarView extends View {
    @state() displays: Display[] = DISPLAYS;

    render() {
        return html`
            <my-calendar .displays="${this.displays}"
                @playlistChangedDisplay="${this._playlistChangedDisplayHandler}"
                @playlistTimeframeChanged="${this._playlistTimeframeChangedHandler}"
                @playlistDurationChanged="${this._playlistDurationChangedHandler}"
                @playlistButtonClicked="${this._playlistButtonClickedHandler}"
            ></my-calendar>
        `;
    }

    private _playlistChangedDisplayHandler(event: CustomEvent<Display[]>) {
        console.log('🚀 ~ MyCalendarView _playlistChangedDisplayHandler ~ event.detail', event.detail);
    }

    private _playlistTimeframeChangedHandler(event: CustomEvent<Playlist>) {
        console.log('🚀 ~ MyCalendarView _playlistTimeframeChangedHandler ~ event.detail', event.detail);
    }

    private _playlistDurationChangedHandler(event: CustomEvent<Playlist>) {
        console.log('🚀 ~ MyCalendarView _playlistDurationChangedHandler', event.detail);
    }

    private _playlistButtonClickedHandler(event: CustomEvent<Playlist>) {
        console.log('🚀 ~ MyCalendarView _playlistButtonClickedHandler', event.detail);
    }
}