import { useRef } from "react";
//types
import type {
    IIssueDisplayFilterOptions,
    IIssueDisplayProperties,
} from "@buzzwaretech/types";
import { observer } from "mobx-react";
//components
import { shouldRenderColumn } from "@/helpers/issue-filter.helper";
import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
import { HeaderColumn } from "./columns/header-column";

interface Props {
  displayProperties: IIssueDisplayProperties;
  property: keyof IIssueDisplayProperties;
  isEstimateEnabled: boolean;
  displayFilters: IIssueDisplayFilterOptions;
  handleDisplayFilterUpdate: (
    data: Partial<IIssueDisplayFilterOptions>,
  ) => void;
  isEpic?: boolean;
}
export const SpreadsheetHeaderColumn = observer(
  function SpreadsheetHeaderColumn(props: Props) {
    const {
      displayProperties,
      displayFilters,
      property,
      handleDisplayFilterUpdate,
      isEpic = false,
    } = props;

    //hooks
    const tableHeaderCellRef = useRef<HTMLTableCellElement | null>(null);

    const shouldRenderProperty = shouldRenderColumn(property);

    return (
      <WithDisplayPropertiesHOC
        displayProperties={displayProperties}
        displayPropertyKey={property}
        shouldRenderProperty={() => shouldRenderProperty}
      >
        <th
          className="h-11 min-w-36 items-center border border-t-0 border-b-0 border-subtle bg-layer-1 py-1 text-13 font-medium"
          ref={tableHeaderCellRef}
          tabIndex={0}
        >
          <HeaderColumn
            displayFilters={displayFilters}
            handleDisplayFilterUpdate={handleDisplayFilterUpdate}
            property={property}
            onClose={() => {
              tableHeaderCellRef?.current?.focus();
            }}
            isEpic={isEpic}
          />
        </th>
      </WithDisplayPropertiesHOC>
    );
  },
);