'use client';
import { useTiptap } from '@ctzhian/tiptap';
import { Icon } from '@ctzhian/ui';
import { Box, Skeleton, Stack } from '@mui/material';
import { useState } from 'react';
import Header from './Header';
import Toolbar from './Toolbar';

const LoadingEditorWrap = () => {
  const [isSyncing] = useState(false);
  const [collaborativeUsers] = useState<
    Array<{
      id: string;
      name: string;
      color: string;
    }>
  >([]);

  const editorRef = useTiptap({
    editable: false,
    content: '',
    exclude: ['invisibleCharacters', 'youtube', 'mention'],
    immediatelyRender: false,
  });

  return (
    <Box>
      <Box
        sx={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          zIndex: 2,
          transition: 'left 0.3s ease-in-out',
        }}
      >
        <Header
          edit={false}
          isSyncing={isSyncing}
          collaborativeUsers={collaborativeUsers}
          detail={{}}
          updateDetail={() => {}}
          handleSave={() => {}}
        />
        {editorRef.editor && <Toolbar editorRef={editorRef} />}
      </Box>
      <Box>
        <Box
          sx={{
            p: '72px 72px 150px',
            mt: '102px',
            mx: 'auto',
            maxWidth: 892,
            minWidth: '386px',
          }}
        >
          <Stack direction={'row'} alignItems={'center'} gap={1} sx={{ mb: 2 }}>
            <Skeleton variant='text' width={36} height={36} />
            <Skeleton variant='text' width={300} height={36} />
          </Stack>
          <Stack direction={'row'} alignItems={'center'} gap={2} sx={{ mb: 4 }}>
            <Stack direction={'row'} alignItems={'center'} gap={0.5}>
              <Icon type='icon-a-shijian2' sx={{ color: 'text.tertiary' }} />
              <Skeleton variant='text' width={130} height={24} />
            </Stack>
            <Stack direction={'row'} alignItems={'center'} gap={0.5}>
              <Icon type='icon-ziti' sx={{ color: 'text.tertiary' }} />
              <Skeleton variant='text' width={80} height={24} />
            </Stack>
          </Stack>
          <Stack
            gap={1}
            sx={{
              minHeight: 'calc(100vh - 432px)',
            }}
          >
            <Skeleton variant='text' height={24} />
            <Skeleton variant='text' width={300} height={24} />
            <Skeleton variant='text' height={24} />
            <Skeleton variant='text' height={24} />
            <Skeleton variant='text' width={600} height={24} />
          </Stack>
        </Box>
      </Box>
    </Box>
  );
};

export default LoadingEditorWrap;
