import {
  ChoiceField,
  VariantSelectionField,
  Visibility,
} from '@hubspot/cms-components/fields';
import { StyleFieldsProps } from './types.js';

const StyleFields = ({
  buttonVariantLabel = 'Button variant',
  buttonVariantName = 'buttonVariant',
  buttonVariantDefault = { variant_name: 'primaryButton' },
  buttonIconPositionLabel = 'Icon position',
  buttonIconPositionName = 'buttonIconPosition',
  buttonIconPositionDefault = 'right',
}: StyleFieldsProps) => {
  // iconComponentShowIcon is the hardcoded id in @components/componentLibrary/Icon/ContentFields.tsx
  const iconPositionVisibility: Visibility = {
    operator: 'EQUAL',
    controlling_field: 'iconComponentShowIcon',
    controlling_value_regex: 'true',
  };

  return (
    <>
      <VariantSelectionField
        label={buttonVariantLabel}
        name={buttonVariantName}
        variantDefinitionName="button"
        default={buttonVariantDefault}
      />
      <ChoiceField
        label={buttonIconPositionLabel}
        name={buttonIconPositionName}
        choices={[
          ['left', 'Left'],
          ['right', 'Right'],
        ]}
        default={buttonIconPositionDefault}
        visibility={iconPositionVisibility}
      />
    </>
  );
};

export default StyleFields;
