import { Component } from 'react';
import Box from '@mui/material/Box';
import PageMinimap from '../../PageMinimap';

function PanelHtmlValue({ html }) {
  if (html == null || html === '') return null;
  return (
    <Box sx={{ mb: 1.5 }}>
      <Box
        sx={(theme) => ({
          p: 1.5,
          borderRadius: 1.5,
          bgcolor:
            theme.palette.mode === 'dark'
              ? 'rgba(255, 255, 255, 0.08)'
              : 'rgba(255, 255, 255, 0.85)',
          border: '1px solid',
          borderColor:
            theme.palette.mode === 'dark'
              ? 'rgba(255, 255, 255, 0.12)'
              : 'rgba(255, 255, 255, 0.95)',
          boxShadow:
            theme.palette.mode === 'dark'
              ? 'none'
              : '0 1px 3px rgba(0, 0, 0, 0.04)',
          fontSize: '0.875rem',
          lineHeight: 1.55,
          color: 'text.primary',
          wordBreak: 'break-word',
          '& h1, & h2, & h3, & h4, & h5, & h6': {
            fontSize: '1rem',
            fontWeight: 600,
            mt: 1.25,
            mb: 0.5,
            '&:first-child': { mt: 0 },
          },
          '& p': {
            my: 0.5,
            '&:first-child': { mt: 0 },
            '&:last-child': { mb: 0 },
          },
          '& ul, & ol': {
            pl: 2.5,
            my: 0.5,
          },
          '& a': {
            color: 'primary.main',
            textDecoration: 'underline',
          },
        })}
        dangerouslySetInnerHTML={{ __html: html }}
      />
    </Box>
  );
}

export default class ArticleDescTab extends Component {
  render() {
    const { article: articleData } = this.props;
    const desc = articleData.desc ?? articleData.description;
    return (
      <>
        <PanelHtmlValue html={desc} />
        <PageMinimap />
      </>
    );
  }
}