import React from 'react'
import { __ } from "@wordpress/i18n"
import { useEffect, useState } from "@wordpress/element"

import ChannelInterface from "Interfaces/ChannelInterface"

interface HeaderProps {
    editorMode: string
    channels: ChannelInterface[]
}

const HeaderComponent: React.FC<HeaderProps> = ({editorMode, channels}: HeaderProps) => {

    // @ts-ignore - DmProData is defined in the WordPress environment by wp_localize_script()
    const DM_PRO__DIR_URL: string = window.DmProData.DM_PRO__DIR_URL
    // @ts-ignore
    const DM_PRO__HELP_URL: string = (editorMode === 'gutenberg') ? window.DmProData.DM_PRO__HELP_GUTENBERG : window.DmProData.DM_PRO__HELP_CLASSIC
    // @ts-ignore
    const DM_PRO__LOGIN_URL: string = window.DmProData.DM_PRO__LOGIN_URL || '#'

    return (
        <header className="vf__header">
            <div className="vf__logo">
                <img src={`${DM_PRO__DIR_URL}/Assets/VFPLogo.png`} alt="Dailymotion Pro WordPress plugin logo" />
            </div>
            <div className="header-action">
                <a href={DM_PRO__HELP_URL} title="How to use?" className="vf__icon-stack vf__icon-link" target="_blank" rel="noreferrer">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 3C7.03875 3 3 7.03875 3 12C3 16.9613 7.03875 21 12 21C16.9613 21 21 16.9613 21 12C21 7.03875 16.9613 3 12 3ZM12 19.5C7.86375 19.5 4.5 16.1362 4.5 12C4.5 7.86375 7.86375 4.5 12 4.5C16.1362 4.5 19.5 7.86375 19.5 12C19.5 16.1362 16.1362 19.5 12 19.5ZM12.9375 16.3125C12.9375 16.83 12.5175 17.25 12 17.25C11.4825 17.25 11.0625 16.83 11.0625 16.3125C11.0625 15.795 11.4825 15.375 12 15.375C12.5175 15.375 12.9375 15.795 12.9375 16.3125ZM15.75 9.75C15.75 11.3512 14.6213 11.955 13.7963 12.3975C13.02 12.8138 12.75 13.0013 12.75 13.5C12.75 13.9125 12.4125 14.25 12 14.25C11.5875 14.25 11.25 13.9125 11.25 13.5C11.25 12.06 12.315 11.49 13.0912 11.0738C13.935 10.6238 14.25 10.3913 14.25 9.75C14.25 9.00375 13.605 8.25 12.375 8.25C11.0288 8.25 10.125 9.00375 10.125 10.125C10.125 10.5375 9.7875 10.875 9.375 10.875C8.9625 10.875 8.625 10.5375 8.625 10.125C8.625 8.17125 10.2038 6.75 12.375 6.75C14.2987 6.75 15.75 8.04 15.75 9.75Z" fill="#1E1E1E"/>
                    </svg>
                    <span>How to use?</span>
                </a>
                { channels[0] ? (
                    <div className="avatar__login-status logged-in">
                        <img src={channels[0].avatar_80_url} alt={channels[0].screenname} title={channels[0].screenname} />
                    </div>
                ) : (
                    <a href={DM_PRO__LOGIN_URL} className="avatar__login-status not-logged-in" title="Not connected, store your API credentials">
                        <span>Not connected</span>
                    </a>
                )}
            </div>
        </header>
    )
}

export default HeaderComponent