import { Stack, useTheme } from '@mui/material';
import { EditorContent } from '@tiptap/react';

import { getEditorStyles } from '../constants';
import { useTextArea } from '../context';
import { type TextAreaReadOnlyProps } from '../types';
import { toSxArray } from '../utils';

export const TextAreaReadOnlyView = ({ sx }: TextAreaReadOnlyProps) => {
  const { editor } = useTextArea();
  const theme = useTheme();

  if (!editor) return null;

  return (
    <Stack
      sx={[
        { width: '100%', containerType: 'inline-size' },
        getEditorStyles(theme),
        {
          borderRadius: 2,
          backgroundColor: theme.palette.new.background.elements.default,
          // Hide editing affordances inherited from the editor styles
          '& .resizer': { display: 'none !important' },
          '& .tiptap': { cursor: 'default' },
          '& [data-type="resizable-media"], & [data-type="raw-html"]': {
            outline: 'none !important',
            transition: 'none !important',
            '& img': {
              outline: 'none !important',
              transition: 'none !important',
            },
          },
        },
        ...toSxArray(sx),
      ]}
    >
      <EditorContent editor={editor} />
    </Stack>
  );
};
