import React from 'react';
import parse from 'html-react-parser';
import { as, Box, Header, Icon, IconButton, Icons, Modal, Scroll, Text } from 'folds';
import classNames from 'classnames';
import Linkify from 'linkify-react';
import { useModalStyle } from '../../hooks/useModalStyle';
import * as css from './style.css';
import { LINKIFY_OPTS, scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
import { sanitizeCustomHtml } from '../../utils/sanitize';
import { RoomTopicContent } from '../../hooks/useRoomMeta';

export const RoomTopicViewer = as<
  'div',
  {
    name: string;
    topic: string | RoomTopicContent;
    requestClose: () => void;
  }
>(({ name, topic, requestClose, className, ...props }, ref) => {
  const topicStr = typeof topic === 'string' ? topic : topic.topic;
  const modalStyle = useModalStyle(480);
  const isFormatted =
    typeof topic !== 'string' &&
    topic.format === 'org.matrix.custom.html' &&
    typeof topic.formatted_body === 'string';

  return (
    <Modal
      size="300"
      flexHeight
      className={classNames(css.ModalFlex, className)}
      aria-labelledby="room-topic-title"
      style={modalStyle}
      {...props}
      ref={ref}
    >
      <Header className={css.ModalHeader} variant="Surface" size="500">
        <Box grow="Yes">
          <Text as="h2" size="H4" truncate id="room-topic-title">
            {name}
          </Text>
        </Box>
        <IconButton size="300" onClick={requestClose} radii="300" aria-label="Close">
          <Icon src={Icons.Cross} />
        </IconButton>
      </Header>
      <Scroll className={css.ModalScroll} size="300" hideTrack>
        <Box className={css.ModalContent} direction="Column" gap="100">
          <Text size="T300" className={css.ModalTopic} priority="400">
            {isFormatted ? (
              parse(sanitizeCustomHtml((topic as RoomTopicContent).formatted_body!))
            ) : (
              <Linkify options={LINKIFY_OPTS}>{scaleSystemEmoji(topicStr)}</Linkify>
            )}
          </Text>
        </Box>
      </Scroll>
    </Modal>
  );
});