import React from "react"
import {useEffect, useState, useRef} from "@wordpress/element"
import {dispatch, select} from "@wordpress/data"
import { store as editorStore } from "@wordpress/editor"
import { dmProStore } from "../../Stores/VideoStore"

import PlayerIdInterface from "Interfaces/PlayerIdInterface"

export interface ThemeFontEntry {
    name: string
    fontFamily: string
}

interface VideoSettings {
    mute: boolean
    player_id: string
    video_heading: boolean
    video_heading_text: string
    font_heading: string
    heading_size: string
    video_title: boolean
    font_title: string
    title_size: string
}

const HEADING_SIZES = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const
const TITLE_SIZES = ['8px', '10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px'] as const

const defaultVideoSettings: VideoSettings = {
    mute: false,
    player_id: '',
    video_heading: false,
    video_heading_text: '',
    font_heading: '',
    heading_size: 'h2',
    video_title: false,
    font_title: '',
    title_size: '14px',
}

const PerPostPlayerComponent = ({
    playerId,
    fonts = [],
}: {
    playerId: PlayerIdInterface[]
    fonts?: ThemeFontEntry[]
}) => {
    const [videoSettings, setVideoSettings] = useState<VideoSettings>(defaultVideoSettings)
    const isInitialMount = useRef(true)

    const handleInputChange = (field: keyof VideoSettings, value: string | boolean) => {
        setVideoSettings(prev => ({
            ...prev,
            [field]: value
        }))
    }

    useEffect(() => {
        if (isInitialMount.current) {
            isInitialMount.current = false
        } else {
            dispatch(editorStore).editPost({
                meta: {
                    dmpro_video_settings: videoSettings,
                },
            })

            dispatch(dmProStore).setVideoSettings(videoSettings)
        }
    }, [videoSettings])

    useEffect(() => {
        const meta = select('core/editor').getEditedPostAttribute('meta')

        if (meta && meta.dmpro_video_settings) {
            setVideoSettings({
                ...defaultVideoSettings,
                // @ts-ignore
                ...meta.dmpro_video_settings,
            })
        }
    }, [])

    const closeSettings = () => {
        const perPostPlayer: HTMLElement = document.querySelector('.video-settings-overlay')
        perPostPlayer.classList.toggle('show');
    }

    return (
        <div className="video-settings-overlay">
            <aside className="video-settings">
                <header className="settings-header">
                    <h2>Video Settings</h2>
                    <button className="close-button" aria-label="Close settings" onClick={closeSettings}>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path
                                d="M17.3086 18.6886C17.5036 18.8836 17.7436 18.9736 17.9986 18.9736C18.2536 18.9736 18.4936 18.8836 18.6886 18.6886C19.0636 18.3136 19.0636 17.6836 18.6886 17.3086L13.3796 11.9996L18.6905 6.68859C19.0655 6.31359 19.0655 5.68359 18.6905 5.30859C18.3155 4.93359 17.6855 4.93359 17.3105 5.30859L11.9996 10.6196L6.68859 5.30859C6.31359 4.93359 5.68359 4.93359 5.30859 5.30859C4.93359 5.68359 4.93359 6.31359 5.30859 6.68859L10.6196 11.9996L5.31055 17.3086C4.93555 17.6836 4.93555 18.3136 5.31055 18.6886C5.50555 18.8836 5.74555 18.9736 6.00055 18.9736C6.25555 18.9736 6.49555 18.8836 6.69055 18.6886L11.9996 13.3796L17.3086 18.6886Z"
                                fill="#0D0D0D"/>
                        </svg>
                    </button>
                </header>

                <div className="settings-content">
                    <section className="settings-section">
                        <h3>Player ID</h3>
                        <div className="input-wrapper">
                            <select className="player-id-select input-form" name="player_id" id="player-id"
                                    value={videoSettings.player_id}
                                    onChange={(e) => handleInputChange('player_id', e.target.value)}
                            >
                                <option value="">--</option>
                                {playerId.map((player) => (
                                    <option key={player.id} value={player.id}>
                                        {player.id} - {player.label}
                                    </option>
                                ))}
                            </select>
                        </div>
                    </section>

                    <section className="settings-section">
                        <h3>Video Heading
                            <label className="switch-wrap">
                                <input name="video_heading" type="checkbox" id="video-heading"
                                       checked={videoSettings.video_heading}
                                       onChange={(e) => handleInputChange('video_heading', e.target.checked)}
                                />
                                <div className="switch"></div>
                            </label></h3>
                        <div className="input-wrapper">
                            <input type="text" className="video-heading-text input-form" id="video-heading-text"
                               name="video_heading_text" value={videoSettings.video_heading_text}
                               onChange={(e) => handleInputChange('video_heading_text', e.target.value)}
                               placeholder="Video Heading Text Input"/>
                        </div>
                        <div className="input-group-2cols space-top-sm">
                            <div
                                className="input-wrapper"
                                style={{ '--first-child-width': '156px' } as React.CSSProperties}
                            >
                                <select
                                    className="input-form"
                                    name="font_heading"
                                    id="per-post-font-heading"
                                    value={videoSettings.font_heading}
                                    onChange={(e) => handleInputChange('font_heading', e.target.value)}
                                >
                                    <option value="">--</option>
                                    {fonts.map((font) => {
                                        const val = `${font.name}|${font.fontFamily}`
                                        return (
                                            <option key={val} value={val}>
                                                {font.name}
                                            </option>
                                        )
                                    })}
                                </select>
                            </div>
                            <div
                                className="input-wrapper"
                                style={{ '--second-child-width': '90px' } as React.CSSProperties}
                            >
                                <select
                                    className="input-form"
                                    name="heading_size"
                                    id="per-post-heading-size"
                                    value={videoSettings.heading_size}
                                    onChange={(e) => handleInputChange('heading_size', e.target.value)}
                                >
                                    {HEADING_SIZES.map((size) => (
                                        <option key={size} value={size}>
                                            {size.toUpperCase()}
                                        </option>
                                    ))}
                                </select>
                            </div>
                        </div>
                    </section>

                    <section className="settings-section">
                        <h3>Show Original Video Title
                            <label className="switch-wrap">
                                <input name="video_title" type="checkbox" id="video-title"
                                       checked={videoSettings.video_title}
                                       onChange={(e) => handleInputChange('video_title', e.target.checked)}
                                />
                                <div className="switch"></div>
                            </label></h3>
                        <div className="input-group-2cols">
                            <div className="input-wrapper" style={{ '--first-child-width': '156px' } as React.CSSProperties}>
                                <select
                                    className="input-form"
                                    name="font_title"
                                    id="per-post-font-title"
                                    value={videoSettings.font_title}
                                    onChange={(e) => handleInputChange('font_title', e.target.value)}
                                >
                                    <option value="">--</option>
                                    {fonts.map((font) => {
                                        const val = `${font.name}|${font.fontFamily}`
                                        return (
                                            <option key={`title-${val}`} value={val}>
                                                {font.name}
                                            </option>
                                        )
                                    })}
                                </select>
                            </div>
                            <div className="input-wrapper" style={{ '--second-child-width': '90px' } as React.CSSProperties}>
                                <select
                                    className="input-form"
                                    name="title_size"
                                    id="per-post-title-size"
                                    value={videoSettings.title_size}
                                    onChange={(e) => handleInputChange('title_size', e.target.value)}
                                >
                                    {TITLE_SIZES.map((size) => (
                                        <option key={size} value={size}>
                                            {size}
                                        </option>
                                    ))}
                                </select>
                            </div>
                        </div>
                    </section>

                    <section className="settings-section">
                        <h3>Player Options</h3>

                        <div className="option-wrapper">
                            <input type="checkbox" name="mute" id="mute" value="1" checked={videoSettings.mute}
                                   onChange={(e) => handleInputChange('mute', e.target.checked)}
                            />
                            <label htmlFor="mute">Mute</label>
                        </div>
                    </section>
                </div>
            </aside>
        </div>
    )
}

export default PerPostPlayerComponent