import { $html, $for, $if } from "sigpro";
import { val, joinClass } from "../core/utils.js";
import { tt } from "../core/i18n.js";

/** TABLE */
export const Table = (props) => {
  const { 
    items = [], 
    columns = [], 
    keyFn, 
    zebra = false, 
    pinRows = false, 
    empty = tt("nodata")(),
    ...rest 
  } = props;

  const tableClass = () => joinClass(
    "table", 
    `${val(zebra) ? "table-zebra" : ""} ${val(pinRows) ? "table-pin-rows" : ""} ${props.class || ""}`
  );

  return $html("div", { class: "overflow-x-auto w-full bg-base-100 rounded-box border border-base-300" }, [
    $html("table", { ...rest, class: tableClass }, [
      $html("thead", {}, [
        $html("tr", {}, 
          columns.map(col => $html("th", { class: col.class || "" }, col.label))
        )
      ]),
      $html("tbody", {}, [
        $for(items, (item, index) => {
          return $html("tr", { class: "hover" }, 
            columns.map(col => {
              const cellContent = () => {
                if (col.render) return col.render(item, index);
                const value = item[col.key];
                return val(value);
              };
              return $html("td", { class: col.class || "" }, [cellContent]);
            })
          );
        }, keyFn || ((item, idx) => item.id || idx)),
        
        $if(() => val(items).length === 0, () => 
          $html("tr", {}, [
            $html("td", { colspan: columns.length, class: "text-center p-10 opacity-50" }, [
              val(empty)
            ])
          ])
        )
      ]),
      $if(() => columns.some(c => c.footer), () => 
        $html("tfoot", {}, [
          $html("tr", {}, 
            columns.map(col => $html("th", {}, col.footer || ""))
          )
        ])
      )
    ])
  ]);
};