radio.tsx

import ConfigurableFormItem from '@/components/formDesigner/components/formItem';
import RadioGroup from './radioGroup';
import React from 'react';
import { CheckCircleOutlined } from '@ant-design/icons';
import { ArrayFormats, DataTypes } from '@/interfaces/dataTypes';
import { IInputStyles } from '@/providers/form/models';
import { getLegacyReferenceListIdentifier } from '@/utils/referenceList';
import { evaluateValue, executeScriptSync, validateConfigurableComponentSettings } from '@/providers/form/utils';
import {
  migrateCustomFunctions,
  migratePropertyName,
  migrateReadOnly,
} from '@/designer-components/_common-migrations/migrateSettings';
import { migrateVisibility } from '@/designer-components/_common-migrations/migrateVisibility';
import { migrateFormApi } from '../_common-migrations/migrateFormApi1';
import { getSettings } from './settingsForm';
import { getAllEventHandlers } from '@/components/formDesigner/components/utils';
import { IEnhancedRadioProps, RadioComponentDefinition } from './interfaces';

const RadioComponent: RadioComponentDefinition = {
  type: 'radio',
  name: 'Radio',
  icon: <CheckCircleOutlined />,
  isInput: true,
  isOutput: true,
  canBeJsSetting: true,
  // Radio has its own intrinsic size and should not be forced to fill wrapper
  preserveDimensionsInDesigner: true,
  dataTypeSupported: ({ dataType, dataFormat }) => dataType === DataTypes.referenceListItem || (dataType === DataTypes.array && dataFormat === ArrayFormats.simple),
  calculateModel: (model, allData) => ({
    eventHandlers: getAllEventHandlers(model, allData),
    dataSourceUrl: model.dataSourceUrl ? executeScriptSync(model.dataSourceUrl, allData) : model.dataSourceUrl,
    defaultValue: evaluateValue(model.defaultValue, allData.data),
  }),
  Factory: ({ model, calculatedModel }) => {
    return (
      <ConfigurableFormItem model={model} autoAlignLabel={false}>
        {(value, onChange) => {
          const customEvents = calculatedModel.eventHandlers;
          const onChangeInternal = (e: any): void => {
            if (e.target) customEvents.onChange({ ...e, currentTarget: { value: e.target.value } });
            if (typeof onChange === 'function') onChange(e);
          };

          return (
            <RadioGroup
              {...model}
              style={!model.enableStyleOnReadonly && model.readOnly ? {} : model.allStyles.fullStyle}
              value={value}
              dataSourceUrl={calculatedModel.dataSourceUrl}
              {...customEvents}
              onChange={onChangeInternal}
            />
          );
        }}
      </ConfigurableFormItem>
    );
  },

  settingsFormMarkup: getSettings,
  validateSettings: (model) => validateConfigurableComponentSettings(getSettings, model),
  migrator: (m) =>
    m
      .add<IEnhancedRadioProps>(0, (prev) => ({
        ...prev,
        dataSourceType: prev['dataSourceType'] ?? 'values',
        direction: prev['direction'] ?? 'horizontal',
      }))
      .add<IEnhancedRadioProps>(1, (prev) => {
        return {
          ...prev,
          referenceListId: getLegacyReferenceListIdentifier(prev.referenceListNamespace, prev.referenceListName),
        };
      })
      .add<IEnhancedRadioProps>(2, (prev) => migratePropertyName(migrateCustomFunctions(prev)))
      .add<IEnhancedRadioProps>(3, (prev) => migrateVisibility(prev))
      .add<IEnhancedRadioProps>(4, (prev) => migrateReadOnly(prev))
      .add<IEnhancedRadioProps>(5, (prev) => ({ ...migrateFormApi.eventsAndProperties(prev) }))
      .add<IEnhancedRadioProps>(6, (prev) => {
        const styles: IInputStyles = {
          style: prev.style,
        };

        return { ...prev, desktop: { ...styles }, tablet: { ...styles }, mobile: { ...styles } };
      }),
  linkToModelMetadata: (model, metadata): IEnhancedRadioProps => {
    const isRefList = metadata.dataType === DataTypes.referenceListItem;

    return {
      ...model,
      dataSourceType: isRefList ? 'referenceList' : 'values',
      referenceListId: isRefList
        ? {
          module: metadata.referenceListModule,
          name: metadata.referenceListName,
        }
        : null,
    };
  },
};

export default RadioComponent;