import { useEffect, useState } from 'react';
import { basename } from './modules/basename';
import { getHistoryState, setHistoryState } from '@kevisual/store/web-page.js';
import { Draw } from './pages/Draw';
// import { App as Manager } from './manager/Manager';
import { Manager } from '@kevisual/mark/src/Module';

export const App = () => {
  const [id, setId] = useState('');
  useEffect(() => {
    const state = getHistoryState();
    if (state?.id) {
      setId(state.id);
    }
  }, []);
  return (
    <div className='bg-white w-full h-full flex'>
      <Manager
        showSearch={true}
        showAdd={true}
        markType={'excalidraw'}
        onClick={(data) => {
          console.log('data', data);
          setHistoryState({
            id: data.id,
          });
          if (data.id !== id) {
            setId('');
            setTimeout(() => {
              setId(data.id);
            }, 200);
          }
        }}>
        <div className='h-full grow'>
          {id ? (
            <Draw
              id={id}
              onClose={() => {
                setId('');
                setHistoryState({
                  id: '',
                });
              }}
            />
          ) : (
            <div className='flex items-center justify-center h-full text-gray-500'>
              {/* 请选择一个画布 */}
            </div>
          )}
        </div>
      </Manager>
    </div>
  );
};