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

const StyleFields = ({
  buttonVariantLabel = 'Button variant',
  buttonVariantName = 'buttonVariant',
  buttonVariantDefault = 'primary',
  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 (
    <>
      <ChoiceField
        label={buttonVariantLabel}
        name={buttonVariantName}
        choices={[
          ['primary', 'Primary'],
          ['secondary', 'Secondary'],
          ['tertiary', 'Tertiary'],
        ]}
        default={buttonVariantDefault}
      />
      <ChoiceField
        label={buttonIconPositionLabel}
        name={buttonIconPositionName}
        choices={[
          ['left', 'Left'],
          ['right', 'Right'],
        ]}
        default={buttonIconPositionDefault}
        visibility={iconPositionVisibility}
      />
    </>
  );
};

export default StyleFields;
