import { useContextKey } from '@kevisual/context';
import { createFileRoute } from '@tanstack/react-router'
import type Eruda from 'eruda';
import { useEffect, useRef } from 'react';
export const Route = createFileRoute('/console')({
  component: RouteComponent,
})


function RouteComponent() {
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    init();
    return () => {
      deinit();
    }
  }, [])
  const deinit = async () => {
    const eruda: typeof Eruda = await useContextKey('eruda');
    eruda.destroy();
  }
  const init = async () => {
    console.log('正在初始化控制台...');
    const eruda: typeof Eruda = await useContextKey('eruda');
    console.log('eruda', eruda);
    if (!ref.current) return;
    eruda.init({
      container: ref.current!,
      tool: ['console'],
      inline: true,
    });
    const consoleTool = eruda.get('console');
    consoleTool.html('<span style="color:red">Red</span>');
  }

  return <div className='w-full overflow-hidden' style={{
    height: 'calc(100% - 48px)'
  }} >
    <div className='min-w-150 w-[80%] mx-auto h-full py-4'>
      <div className='relative w-full h-full border'>
        <div ref={ref}></div>
      </div>
    </div>
  </div>
}