---

import React from 'react';
import type { ReactNode } from 'react';

//import { CodeBlock } from 'react-code-block';
//import { themes } from 'prism-react-renderer';
import { Highlight } from 'prism-react-renderer';
import type {PrismTheme} from "prism-react-renderer";

import { parseHTML } from 'linkedom';

import pkg from 'lodash';
const {unescape} = pkg;

import { Prism } from '@astrojs/prism'

const theme: PrismTheme = {
    plain: {
        
    },
    styles: [
        
    ],
};

const props = Astro.props;

/*export type MDXCodeBlockProps = {
    children: any,
    class: string,
    language?: string,
    filename?: string,
    lines?: [string],
    words?: [string],
    showLineNumbers?: boolean,
    startLine?: number,
}*/

/*let darkMode = useMediaQuery(
    { query: "(prefers-color-scheme: dark)" }, 
    undefined, 
    (isDark) => { darkMode = isDark }
);*/

let lang: string = '';
let filename: string = '';

const code_html = await Astro.slots.render('default');

// @ts-ignore
const renderCode = (html) => {
    const { document } = parseHTML(html);
    const child = document.children
    const match = /language-(\w+)/.exec(child[0].className);
    lang = match ? match[1] : 'plaintext';
    
    const match2 = /filename="(.*?)"/.exec(child[0].getAttribute('metastring') ?? '')
    filename = match2 ? match2[1] : '';
    //console.log(match)
    return unescape(child[0].innerHTML);
}

const code: string = renderCode(code_html);

/*
(typeof props.children === 'string') 
    ? props.children 
    : React.Children.toArray(props.children).reduce<string>((acc: any, child: ReactNode) => {
        if (React.isValidElement(child) && typeof child.props.children === 'string') {
            const match = /language-(\w+)/.exec(child.props.class);
            lang = match ? match[1] : 'plaintext';
            return acc + child.props.children;
        }
        return acc;
    }, '');
*/

const lineNumbers = props.showLineNumbers ?? false;
const wrap = props.wrap ?? false;
const codeBackgroundTW = 'p-2 bg-neutral-300 bg-opacity-50 dark:bg-slate-800 dark:bg-opacity-100 rounded-lg font-mono';

    /* bg-neutral-300 bg-opacity-50 dark:bg-slate-600 dark:bg-opacity-100
    text-neutral-800 dark:text-slate-300 
    theme={darkMode ? themes.vsDark : themes.vsLight}*/

/*
<Highlight
    theme={theme}
    code={code}
    language={lang}
>
    {({ class, style, tokens, getLineProps, getTokenProps }) => (
        <>
        {props.filename ? (
            <div class={codeBackgroundTW + 'rounded-b-none w-fit bg-opacity-90 dark:bg-opacity-100 dark:bg-slate-600 text-black dark:text-white'}>
                {props.filename}
            </div>
        ) : ''}
        <pre class={  codeBackgroundTW + 
            (wrap ? 'text-wrap' : 'overflow-y-scroll') + ' ' + 
            (props.filename ? 'rounded-tl-none' : '') + ' mb-2' }>
            {tokens.slice(0,-1).map((line, i) => (
                <div {...getLineProps({ line, key: i })}>
                {line.map((token, key) => (
                    <span {...getTokenProps({ token, key })} />
                ))}
                </div>
            ))}
        </pre>
        </>
    )}
</Highlight>
*/

---
<>
{filename ? (
    <div class={codeBackgroundTW + ' rounded-br-none w-fit bg-opacity-90 dark:bg-opacity-100 dark:bg-slate-600 text-black dark:text-white'}>
        {filename}
    </div>
) : ''}
<Prism
    class={codeBackgroundTW + (filename ? 'rounded-tl-none' : '')}
    code={code}
    lang={lang}
/>
</>
