import {
  ChoiceField,
  EmbedField,
  ImageField,
  VideoField,
} from '@hubspot/cms-components/fields';
import { ContentFieldsProps } from './types.js';

const ContentFields = ({
  videoTypeLabel = 'Video type',
  videoTypeName = 'videoType',
  hsVideoLabel = 'HubSpot video',
  hsVideoName = 'hubspotVideo',
  hsVideoDefault,
  embedVideoLabel = 'Embed video',
  embedVideoName = 'embedVideo',
  embedVideoDefault,
  oembedThumbnailLabel = 'Custom thumbnail',
  oembedThumbnailName = 'oembedThumbnail',
  oembedThumbnailDefault,
}: ContentFieldsProps) => {
  return (
    <>
      <ChoiceField
        name={videoTypeName}
        label={videoTypeLabel}
        id="videoType"
        display="radio"
        choices={[
          ['embed', 'Embed'],
          ['hubspot_video', 'HubSpot video'],
        ]}
        default="embed"
        visibilityRules="ADVANCED"
        advancedVisibility={{
          boolean_operator: 'OR',
          criteria: [
            {
              access: {
                operator: 'HAS_ALL',
                scopes: ['marketing-video'],
              },
            },
            {
              controlling_field: 'videoType',
              operator: 'EQUAL',
              controlling_value_regex: 'hubspot_video',
            },
          ],
        }}
      />

      <VideoField
        name={hsVideoName}
        label={hsVideoLabel}
        showAdvancedOptions={true}
        default={hsVideoDefault}
        visibility={{
          controlling_field: 'videoType',
          operator: 'EQUAL',
          controlling_value_regex: 'hubspot_video',
        }}
      />

      <EmbedField
        name={embedVideoName}
        label={embedVideoLabel}
        id="embedVideo"
        supportedSourceTypes={['oembed', 'html']}
        supportedOembedTypes={['video']}
        supportedMediaBridgeProviders={[]}
        default={embedVideoDefault}
        visibility={{
          controlling_field: 'videoType',
          operator: 'EQUAL',
          controlling_value_regex: 'embed',
        }}
      />

      <ImageField
        name={oembedThumbnailName}
        label={oembedThumbnailLabel}
        id="oembedThumbnail"
        default={oembedThumbnailDefault}
        responsive={true}
        resizable={false}
        visibilityRules="ADVANCED"
        advancedVisibility={{
          boolean_operator: 'AND',
          criteria: [
            {
              controlling_field: 'videoType',
              operator: 'EQUAL',
              controlling_value_regex: 'embed',
            },
            {
              controlling_field: 'embedVideo',
              operator: 'MATCHES_REGEX',
              controlling_value_regex: '(?=.*"source_type":"oembed")',
            },
            {
              controlling_field: 'embedVideo',
              operator: 'MATCHES_REGEX',
              controlling_value_regex: '(?=.*"oembed_url":"(?!")+)',
            },
          ],
        }}
      />
    </>
  );
};

export default ContentFields;
