import {
  RichTextField,
  RichTextFieldType,
} from '@hubspot/cms-components/fields';
import type { ContentFieldsProps } from './types.js';

// To do: These are placeholders - we can refine and add more after some UX feedback and further discussion

const headingEnabledFeatures: RichTextFieldType['enabledFeatures'] = [
  'heading',
  'alignment',
  'standard_emphasis',
  'link',
  'personalize',
];

const bodyContentEnabledFeatures: RichTextFieldType['enabledFeatures'] = [
  'block',
  'alignment',
  'indents',
  'lists',
  'standard_emphasis',
  'advanced_emphasis',
  'link',
  'image',
  'emoji',
  'table',
  'personalize',
  'cta',
  'embed',
  'video',
  'charmap',
  'anchor',
  'nonbreaking_space',
  'source_code',
  'visual_blocks',
];

const featureSetMap = {
  bodyContent: bodyContentEnabledFeatures,
  heading: headingEnabledFeatures,
};

const ContentFields = ({
  textLabel = 'Text',
  textName = 'text',
  textDefault = '<p>Text goes here.</p>',
  textFeatureSet = 'bodyContent',
}: ContentFieldsProps) => {
  return (
    <RichTextField
      label={textLabel}
      name={textName}
      default={textDefault}
      enabledFeatures={featureSetMap[textFeatureSet]}
    />
  );
};

export default ContentFields;
