import styles from './ViewForm.module.css';
import {
  isCheckboxType,
  isSelectType,
  isMultiselectType,
  isDateTimeType
} from '../../../utils/attributeTypeMapper';
import type { AttributeType } from '../../../utils/attributeTypeMapper';

// Field configuration interface for ViewForm
export interface ViewFieldConfig {
  key: string;
  label: string;
  type?: AttributeType;
  formatter?: (value: any) => string;
  options?: Array<{ value: string | number; label: string }>; // For select/enum types
}

// ViewForm props - for display-only purposes
export interface ViewFormProps<T = any> {
  data: T;
  fields: ViewFieldConfig[];
  className?: string;
}

// ViewForm component - displays data in read-only format
export function ViewForm<T extends Record<string, any>>({
  data,
  fields,
  className = ''
}: ViewFormProps<T>) {

  // Format value based on field type
  const formatValue = (field: ViewFieldConfig, value: any): string => {
    // Use custom formatter if provided
    if (field.formatter) {
      return field.formatter(value);
    }

    // Handle null/undefined
    if (value === null || value === undefined) {
      return 'N/A';
    }

    // Type-based formatting
    if (field.type) {
      // Boolean/Checkbox types
      if (isCheckboxType(field.type)) {
        return value ? 'Yes' : 'No';
      }

      // Select/Enum types
      if (isSelectType(field.type) && field.options) {
        const option = field.options.find(opt => String(opt.value) === String(value));
        return option ? option.label : String(value);
      }

      // Multiselect types
      if (isMultiselectType(field.type) && field.options) {
        const selectedValues = Array.isArray(value) ? value : (value ? [value] : []);
        if (selectedValues.length === 0) {
          return 'None';
        }
        return selectedValues.map(v => {
          const option = field.options!.find(opt => String(opt.value) === String(v));
          return option ? option.label : String(v);
        }).join(', ');
      }

      // Date/Time/Timestamp types
      if (isDateTimeType(field.type)) {
        try {
          const date = value instanceof Date ? value : new Date(value);
          if (!isNaN(date.getTime())) {
            return date.toLocaleString();
          }
        } catch {
          // Fall through to default
        }
      }
    }

    // Default: convert to string
    if (Array.isArray(value)) {
      return value.length > 0 ? value.join(', ') : 'None';
    }

    return String(value);
  };

  // Render field in view-only mode
  const renderField = (field: ViewFieldConfig) => {
    const value = data[field.key];
    const formattedValue = formatValue(field, value);

    return (
      <div className={styles.fieldGroup} key={field.key}>
        <label className={styles.fieldLabel}>{field.label}</label>
        <div className={styles.fieldValue}>
          {formattedValue}
        </div>
      </div>
    );
  };

  return (
    <div className={`${styles.viewForm} ${className}`}>
      {fields.map(field => renderField(field))}
    </div>
  );
}

export default ViewForm;

