import {
  TextField,
  LinkField,
  ChoiceField,
  Visibility,
} from '@hubspot/cms-components/fields';
import Icon from '../Icon/index.js';
import { ContentFieldsProps } from './types.js';

const ContentFields = <
  TButtonTextName extends string = 'buttonText',
  TButtonLinkName extends string = 'buttonLink'
>({
  buttonTextLabel = 'Button text',
  buttonTextName = 'buttonText' as TButtonTextName,
  buttonTextDefault = 'Button',
  buttonLinkLabel = 'Button link',
  buttonLinkName = 'buttonLink' as TButtonLinkName,
  buttonLinkDefault = {
    url: {
      type: 'EXTERNAL',
      content_id: null,
      href: 'https://www.hubspot.com',
    },
  },
  showButtonLink = true,
  iconLabel,
  iconName,
  iconDefault,
  showIconLabel = 'Show button icon',
  showIconName,
  showIconDefault,
  buttonIconPositionLabel = 'Icon position',
  buttonIconPositionName = 'buttonIconPosition',
  buttonIconPositionDefault = 'right',
  fieldVisibility,
}: ContentFieldsProps<TButtonTextName, TButtonLinkName>) => {
  const iconContentFieldsProps = {
    iconLabel,
    iconName,
    iconDefault,
    showIconLabel,
    showIconName,
    showIconDefault,
  };

  // iconComponentShowIcon is the hardcoded id in @components/componentLibrary/Icon/ContentFields.tsx
  const iconPositionVisibility: Visibility = {
    operator: 'EQUAL',
    controlling_field: 'iconComponentShowIcon',
    controlling_value_regex: 'true',
  };

  return (
    <>
      <TextField
        label={buttonTextLabel}
        name={buttonTextName}
        visibility={fieldVisibility?.[buttonTextName]}
        default={buttonTextDefault}
        required={true}
      />
      {showButtonLink && (
        <LinkField
          label={buttonLinkLabel}
          name={buttonLinkName}
          visibility={fieldVisibility?.[buttonLinkName]}
          default={buttonLinkDefault}
          required={true}
        />
      )}
      <Icon.ContentFields addIconToggle={true} {...iconContentFieldsProps} />
      <ChoiceField
        label={buttonIconPositionLabel}
        name={buttonIconPositionName}
        choices={[
          ['left', 'Left'],
          ['right', 'Right'],
        ]}
        display="pill"
        default={buttonIconPositionDefault}
        visibility={iconPositionVisibility}
      />
    </>
  );
};

export default ContentFields;
