// WSList.tsx 
import React, { Component } from 'react';
import IWDListState from './IWDListState'; 
import IWDListProps from './IWDListProps';
import defaultValue from "./WDListState.json";
import "./WDList.css";
import WDWidgetBase from '@widgets/WDWidgetBase/WDWidgetBase';

export default class WDList extends WDWidgetBase<IWDListProps, IWDListState>{

  constructor(props: any) {
    super(props, defaultValue);
    if (this.manualInitState) {
      this.state = {
        ...this.state
        // Aggiungere qui manualmente la valorizzazione dello stato in base ai valori di props
      }
    }
  }

  private getAlignClass(align: string) : string {
    let retValue = "text-start";
    switch (align) {
      case "right":
        retValue = "text-end";
        break;
      case "center":
        retValue = "text-center";
        break;
    }
    return retValue;
  }

  renderContent(){

      const { header } = this.state;
      const { rows } = this.state;

       return(
          <div className="WSList">
            <div className="list-header d-flex justify-content-between align-items-center px-3">
              {header.map((title, index) => (
                <div key={`C${index}`} className={`col-${title.size} ${this.getAlignClass(title.align)}`}>
                  <strong>{title.text}</strong>
                </div>
              ))}
            </div>
            <ul className="list-group list-group-flush">
              {rows.map((row, indexRow) => (
                <li className={`list-group-item ${row.selected ? " selected" : ""}`} key={`R${indexRow}`}>
                  {header.map((title, indexCol) => (
                    <div onClick={() => this.event('rowClick', `R${indexRow}_C${indexCol}`)} key={`R${indexRow}_C${indexCol}`} className={`col-${title.size} ${this.getAlignClass(title.align)} ${(row.icon[indexCol] !== "" ? "with-icon" : "")}`}>
                      {row.icon[indexCol] !== "" && <i className={`fa ${row.icon[indexCol]}`}></i>}
                      {row.value[indexCol]}
                    </div>
                  ))}
                </li>
              ))}
            </ul>
          </div>
       );
    }
}
