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

const StyleFields = ({
  hideFields = [],
  borderStyleLabel = 'Line type',
  borderStyleName = 'borderStyle',
  borderStyleDefault = 'solid',
  thicknessLabel = 'Line thickness',
  thicknessName = 'thickness',
  thicknessDefault = 1,
  lengthLabel = 'Line length',
  lengthName = 'length',
  lengthDefault = 100,
  alignmentLabel = 'Line alignment',
  alignmentName = 'alignment',
  alignmentDefault = { horizontal_align: 'CENTER', vertical_align: 'MIDDLE' },
  alignmentDirection = 'HORIZONTAL',
  colorLabel = 'Line color',
  colorName = 'color',
  colorDefault = { color: '#000000', opacity: 100 },
}: StyleFieldsProps) => {
  return (
    <>
      {!hideFields.includes('borderStyle') && (
        <ChoiceField
          label={borderStyleLabel}
          name={borderStyleName}
          required={true}
          choices={[
            ['solid', 'Solid'],
            ['dotted', 'Dotted'],
            ['dashed', 'Dashed'],
            ['double', 'Double'],
          ]}
          default={borderStyleDefault}
        />
      )}
      {!hideFields.includes('color') && (
        <ColorField
          label={colorLabel}
          name={colorName}
          default={colorDefault}
          showOpacity={false}
        />
      )}
      {!hideFields.includes('thickness') && (
        <NumberField
          label={thicknessLabel}
          name={thicknessName}
          required={true}
          suffix="px"
          min={1}
          default={thicknessDefault}
        />
      )}
      {!hideFields.includes('length') && (
        <NumberField
          label={lengthLabel}
          name={lengthName}
          required={true}
          suffix="%"
          min={1}
          max={100}
          default={lengthDefault}
        />
      )}
      {!hideFields.includes('alignment') && (
        <AlignmentField
          label={alignmentLabel}
          name={alignmentName}
          alignmentDirection={alignmentDirection}
          default={alignmentDefault}
        />
      )}
    </>
  );
};

export default StyleFields;
