import { ColorField } from '@hubspot/cms-components/fields';
import { StyleFieldsProps } from './types.js';

const StyleFields = ({
  playButtonColorLabel = 'Play button color',
  playButtonColorName = 'playButtonColor',
  playButtonColorDefault = { color: '#F7761F', opacity: 100 },
}: StyleFieldsProps) => {
  return (
    <ColorField
      label={playButtonColorLabel}
      name={playButtonColorName}
      default={playButtonColorDefault}
      showOpacity={false}
      binding={{ context: 'global_styles', collection: 'theme_colors' }}
      visibilityRules="ADVANCED"
      advancedVisibility={{
        boolean_operator: 'OR',
        criteria: [],
        children: [
          {
            boolean_operator: 'AND',
            criteria: [
              {
                controlling_field: 'videoType',
                operator: 'EQUAL',
                controlling_value_regex: 'hubspot_video',
              },
            ],
          },
          {
            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":"(?!")+)',
              },
              {
                controlling_field: 'oembedThumbnail',
                operator: 'MATCHES_REGEX',
                controlling_value_regex: '(?=.*"src":"(?!")+)',
              },
            ],
          },
        ],
      }}
    />
  );
};

export default StyleFields;
