import { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { createMarkStore, store } from '../store';
console.log('store', store);
import { StoreContextProvider, useStore } from '@kevisual/store/react';
import { LineChart } from 'lucide-react';
import { useShallow } from 'zustand/shallow';
import { Core } from './core/Excalidraw';
import { OrderedExcalidrawElement } from '@excalidraw/excalidraw/element/types';
export const DrawLayout = ({ children }: { children: React.ReactNode }) => {
  return (
    <StoreContextProvider id='draw'>
      <div className='h-full w-full'>{children}</div>
      <DrawHeader />
    </StoreContextProvider>
  );
};
export const Draw = () => {
  useLayoutEffect(() => {
    // @ts-ignore
    window.EXCALIDRAW_ASSET_PATH = 'https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/prod/';
    // window.EXCALIDRAW_ASSET_PATH = '/';
  }, []);
  return (
    <DrawLayout>
      <ExcaliDrawComponent />
    </DrawLayout>
  );
};
export const DrawHeader = () => {
  const store = useStore(
    useShallow((value: any) => {
      return {
        mark: value.mark,
        setMark: value.setMark,
        setInfo: value.setInfo,
      };
    }),
  );
  console.log('store show', store);
  const init = useRef(false);
  useEffect(() => {
    if (!init.current && store.mark) {
      init.current = true;
      store.setMark('1234');
      setTimeout(() => {
        store.setMark('info4');
      }, 1000);
    }
  }, [store.mark]);
  return (
    <div className='fixed left-0 top-0 z-10 h-10 w-10 bg-red-500'>
      <button>
        <LineChart />
      </button>
    </div>
  );
};
export const ExcaliDrawComponent = () => {
  return (
    <StoreContextProvider id='draw2' stateCreator={createMarkStore}>
      <Core />
    </StoreContextProvider>
  );
};