/* eslint-disable @typescript-eslint/no-explicit-any */
import { useMemo } from "react";
import { BlockProps } from "./types";

const BlockView = (props: BlockProps) => {
  const tooltipContent = useMemo(() => {
    if (!props.toolTip?.isApply) return undefined;
    if (props.toolTip.dataTip) return String(props.toolTip.dataTip);
    if (props.toolTip.dataTipField && props.viewModel) {
      const val = props.viewModel[props.toolTip.dataTipField];
      return val != null ? String(val) : undefined;
    }
    return props.value ?? undefined;
  }, [props.toolTip, props.viewModel, props.value]);

  return (
    <section
      className={`tmpl-block-container ${props.widgetStyle?.className ?? ""}`}
      data-prc-col-important={(props.widgetStyle as any)?.important ? props.widgetStyle?.className || undefined : undefined}
      id={props.widgetStyle?.id ?? ""}
      style={{ ...(props.widgetStyle?.inline ?? {}) }}
    >
      <div className="tmpl-block__item">
        <div
          className={`tmpl-block__header ${
            props.enableHeaderBorder ? "tmpl-border-header" : ""
          }`}
        >
          {props.title}
        </div>
        <div
          className="tmpl-block__value"
          dangerouslySetInnerHTML={{ __html: props.value ?? "-" }}
          title={tooltipContent}
        ></div>
      </div>
    </section>
  );
};

export default BlockView;