import Artplayer from 'artplayer';
import { BaseVideoPlayer } from '../BaseVideoPlayer.ts';

interface Video {
    id: string;
    title: string;
    name: string | null;
    videoTitle: string;
    subTitle: string;
    description: string;
    tags: string[];
    playCount: number;
    danmakuCount: number;
    commentCount: number;
    cover: string;
    m3u8: string;
}

/**
 * 首页视频模块
 */
export class HomeVideo extends BaseVideoPlayer {
    private readonly _playerVideoContainerSelector: string = '.js-home-video-container';

    private readonly _container: HTMLDivElement | null = document.querySelector(
        this._playerVideoContainerSelector
    ) as HTMLDivElement | null;

    constructor() {
        super();
        if (!this._container) {
            return;
        }
        this.init();
    }

    private init(): void {
        const configStr = this._container?.getAttribute('data-video-config');
        if (!configStr) {
            return;
        }

        try {
            const video = JSON.parse(configStr) as Video;
            this.play(video);
        } catch (err) {
            console.warn('Failed to parse video config:', err);
        }
    }

    private play(video: Video): void {
        if (!this._container) {
            return;
        }

        const videoId = video.id;

        const art = new Artplayer({
            container: this._container,
            url: video.m3u8,
            poster: video.cover,
            fullscreenWeb: true,
            fullscreen: true,
            controls: [],
            // 使用基类的通用配置
            ...this.getCommonArtplayerOptions(),
            plugins: [this.createDanmakuPlugin(videoId)],
        });

        // 全屏状态样式切换
        art.on('fullscreenWeb', (state) => {
            if (state) {
                this._container?.classList.add('is-web-fullscreen');
            } else {
                this._container?.classList.remove('is-web-fullscreen');
            }
        });

        art.on('fullscreen', (state) => {
            if (state) {
                this._container?.classList.add('is-fullscreen');
            } else {
                this._container?.classList.remove('is-fullscreen');
            }
        });

        // 使用基类的首次播放处理
        art.on('video:play', this.createFirstPlayHandler(videoId));
    }
}