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

const StyleFields = ({
  hideFields = [],
  iconColorLabel = 'Icon color',
  iconColorName = 'iconColor',
  iconColorDefault = { color: '#A8A8A8', opacity: 100 },
  iconBackgroundColorLabel = 'Icon background color',
  iconBackgroundColorName = 'iconBackgroundColor',
  iconBackgroundColorDefault = { color: '#2C2C2C', opacity: 100 },
  iconShapeLabel = 'Icon shape',
  iconShapeName = 'iconShape',
  iconShapeDefault = 'square',
  iconSizeLabel = 'Icon size',
  iconSizeName = 'iconSize',
  iconSizeDefault = 'small',
}: StyleFieldsProps) => {
  return (
    <>
      {!hideFields.includes('iconColor') && (
        <ColorField
          label={iconColorLabel}
          name={iconColorName}
          default={iconColorDefault}
          required
          showOpacity={false}
          binding={{ context: 'global_styles', collection: 'theme_colors' }}
        />
      )}
      {!hideFields.includes('iconBackgroundColor') && (
        <ColorField
          label={iconBackgroundColorLabel}
          name={iconBackgroundColorName}
          default={iconBackgroundColorDefault}
          required
          showOpacity={false}
          binding={{ context: 'global_styles', collection: 'theme_colors' }}
        />
      )}
      {!hideFields.includes('iconShape') && (
        <ChoiceField
          label={iconShapeLabel}
          name={iconShapeName}
          display="buttons"
          preset="icon_shape"
          choices={[
            ['square', 'Square'],
            ['rounded', 'Rounded'],
            ['circle', 'Circle'],
          ]}
          default={iconShapeDefault}
          required={true}
        />
      )}
      {!hideFields.includes('iconSize') && (
        <ChoiceField
          label={iconSizeLabel}
          name={iconSizeName}
          choices={[
            ['small', 'Small (16x16 px)'],
            ['medium', 'Medium (24x24 px)'],
            ['large', 'Large (32x32 px)'],
          ]}
          default={iconSizeDefault}
          required={true}
        />
      )}
    </>
  );
};

export default StyleFields;
