import React from "react"
import {useEffect, useState, useRef} from "@wordpress/element"
import {dispatch, select} from "@wordpress/data"
import { STORE_KEY } from "../../Stores/VideoStore"

import PlayerIdInterface from "Interfaces/PlayerIdInterface"

interface VideoSettings {
    mute: boolean
    player_id: string
    video_heading: boolean
    video_heading_text: string
    video_title: boolean
}

const PerPostPlayerComponent = ({playerId}: {playerId: PlayerIdInterface[]} ) => {
    const [videoSettings, setVideoSettings] = useState<VideoSettings>({
        mute: false,
        player_id: '',
        video_heading: false,
        video_heading_text: '',
        video_title: false,
    })
    const isInitialMount = useRef(true)

    const handleInputChange = (field, value) => {
        setVideoSettings(prev => ({
            ...prev,
            [field]: value
        }))
    }

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

            // @ts-ignore
            dispatch(STORE_KEY).setVideoSettings(videoSettings)
        }
    }, [videoSettings])

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

        if (meta && meta.dmpro_video_settings) {
            setVideoSettings(prev => ({
                ...prev,
                // @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>Video Preview</h3>*/}
                    {/*    <div className="preview-heading">Video Heading Text Input</div>*/}
                    {/*    <div className="video-preview-settings">*/}
                    {/*        <img src="your-video-thumbnail.jpg" alt="Video Preview Thumbnail"/>*/}
                    {/*    </div>*/}
                    {/*    <p className="preview-title">Original Video Title</p>*/}
                    {/*</section>*/}

                    <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.label} - {player.id}
                                    </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>
                    </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>
                        <div className="option-wrapper">
                            <input type="checkbox" name="video_title" id="video-title" value="1"
                                   checked={videoSettings.video_title}
                                   onChange={(e) => handleInputChange('video_title', e.target.checked)}
                            />
                            <label htmlFor="video-title">Show original video title below</label>
                        </div>
                    </section>

                    {/*<hr className="form-line"/>*/}

                    {/*<footer className="settings-footer">*/}
                    {/*    <button className="update-button" type="submit">Update</button>*/}
                    {/*</footer>*/}
                </div>
            </aside>
        </div>
    )
}

export default PerPostPlayerComponent