import type { PageSectionComponent } from '../types';
import type { BlockTextProps } from './types';

import Box from '~/src/components/Box';
import CollapsableText from '~/src/components/CollapsableText';
import { toRgba } from '~/src/lib/utils/color';
import { useRegisterNavItem } from '../../components/ItemPageNav';
import { MAX_CONTENT_WIDTH } from '../../constants';
import { usePageTheme } from '../../hooks/theme';
import SectionTitle from '../lib/SectionTitle';
import { resolveText } from './utils';

// TODO: rename this TextSection
const BlockText: PageSectionComponent<BlockTextProps> = ({
  title,
  text,
  navTitle = 'About',
  sectionId,
  sectionIndex,
  withShowMore = true,
  layoutData,
}) => {
  const pageTheme = usePageTheme();
  const textResolved = resolveText({ text, layoutData });

  useRegisterNavItem({
    id: sectionId,
    text: navTitle,
    index: sectionIndex,
  });

  if (!textResolved) {
    return null;
  }

  return (
    <Box>
      {title && <SectionTitle margin="0 0 2rem" text={title} />}
      <Box
        padding="0 1.2rem"
        isCentered
        maxWidth={MAX_CONTENT_WIDTH}
        style={{
          boxSizing: 'content-box',
          textAlign: 'center',
        }}
      >
        <CollapsableText
          text={textResolved}
          color={toRgba(pageTheme.customFontColor ?? pageTheme.textColor, 0.8)}
          margin="0 3"
          textSize="1.7rem"
          lineHeight="2.3rem"
          fontFamily={pageTheme.fontFamily}
          initialMaxLines={3}
          withShowMore={withShowMore}
          // REVIEW: maybe should be pro only?
          withLinkify={true}
          testId="textSectionContent"
        />
      </Box>
    </Box>
  );
};

export default BlockText;