import { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { createMarkStore, store, useMarkStore } from '../store';
console.log('store', store);
import { StoreContextProvider } from '@kevisual/store/react';
import { LineChart } from 'lucide-react';
import { useShallow } from 'zustand/shallow';
import { Core } from './core/Excalidraw';
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 = useMarkStore(
    useShallow((value) => {
      return {
        mark: value.mark,
        setMark: value.setMark,
        setInfo: value.setInfo,
        getList: value.getList,
      };
    }),
  );
  console.log('store show', store);
  useEffect(() => {
    store.getList();
  }, []);
  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>
  );
};