import { RootState } from './rootReducer';
import { useSelector } from 'react-redux';
import React, { useEffect, useState } from 'react';
import axios from 'B/axios';
import Paper from '@mui/material/Paper';
import Box from '@mui/material/Box';

export default function DocumentView({ heightStyle }) {
  const node = useSelector((s: RootState) => s.node);
  const [html, setHTML] = useState('');
  useEffect(() => {
    if (node?.type !== 'INF') return;

    axios.get(`/documentation/${node.id}?type=inf`).then((v) => {
      setHTML(v.data);
    });
  }, [node]);

  if (node === null) {
    return null;
  }

  const { id, type } = node;
  const isDocumentation = type === 'DOC' || type === 'INF';
  if (isDocumentation === false) {
    return null;
  }

  if (type === 'INF') {
    return (
      <Paper>
        <Box p={2}>
          <div
            style={{ width: '100%', height: heightStyle }}
            dangerouslySetInnerHTML={{ __html: html }}
          ></div>
        </Box>
      </Paper>
    );
  }

  return (
    <div>
      <iframe
        style={{ width: '100%', height: heightStyle }}
        src={`/documentation/${id}?${new Date().getTime()}`}
      ></iframe>
    </div>
  );
}