import { Component, input, Type } from '@angular/core';
import { CommonModule } from '@angular/common';

export interface CellComponent<T> {
  component?: Type<any>;
  componentInputs?: (obj: T) => { [key: string]: any };
}

export interface DetailViewRow<T> extends CellComponent<T> {
  attribute: keyof T;
  getValue?: (obj: T) => any;
  format?: 'date' | 'datetime' | 'number' | 'raw' | ((value: any) => string);
  getTitle?: string | ((obj: T) => string);
  getDetailClass?: (obj: T) => string;
  getTitleStyleClass?: (obj: T) => string;
  getValueStyleClass?: (obj: T) => string;
  titleComponent?: Type<any>;
  titleComponentInputs?: (obj: T) => { [key: string]: any };
}

export interface DetailViewConfig<T> {
  data: T;
  rows: DetailViewRow<T>[];
  styleClass?: string;
}

@Component({
  selector: 'app-detail-view',
  imports: [CommonModule],
  templateUrl: './detail-view.html',
  styleUrl: './detail-view.css',
})
export class DetailView<T> {
  config = input.required<DetailViewConfig<T>>();

  getFormattedValue(row: DetailViewRow<T>, data: T): string {
    let value : any;
    try {
      value = row.getValue ? row.getValue(data) : data[row.attribute];
    }catch (e) {
      value = '';

    }

    if (row.component) {
      return '';
    }

    if (typeof row.format === 'function') {
      return row.format(value);
    }

    switch (row.format) {
      case 'date':
        return new Date(value).toLocaleDateString();
      case 'datetime':
        return new Date(value).toLocaleString();
      case 'number':
        return Number(value).toString();
      case 'raw':
      default:
        return value;
    }
  }

  getTitle(row: DetailViewRow<T>, data: T): string {
    if (row.titleComponent) {
      return '';
    }

    if (typeof row.getTitle === 'function') {
      return row.getTitle(data);
    }
    return row.getTitle || String(row.attribute);
  }
}