import * as React from "react";
import { ColumnProps } from "primereact/column";
import { IColumn } from "./IColumn";
import IGetColumnPropsArgs from "./IGetColumnPropsArgs";
import MinusSquareIcon from "../icon/MinusSquareIcon";
import PlusSquareIcon from "../icon/PlusSquareIcon";

export interface IExpandColumnProps {
  /** Whether columns are expanded or not */
  expanded?: boolean;

  /** Called when column header icon is clicked */
  onToggle?: (expanded: boolean) => void;
}

/**
 * @beta
 */
const ExpandColumn: React.FC<IExpandColumnProps> & IColumn = (props: IExpandColumnProps) => {
  // Note this class is only for intellisense with typescript.
  // The column component for a datagrid is never rendered.  It is only used to propagate props.
  // Component lifecycle and constructor will never be called.
  // Don't put any logic here.  It will never be called.

  // In case you didn't read above, DO NOT PUT ANY LOGIC HERE.
  return null;
}

ExpandColumn.className = "ExpandColumn";

ExpandColumn.getColumnProps = (args: IGetColumnPropsArgs): ColumnProps => {
  const { props } = args;
  let { expanded, onToggle } = props as IExpandColumnProps;

  return {
    className: "p-column-expand",
    header: <span className="p-column-expand-icon" onClick={() => onToggle && onToggle(!expanded)}>
      {expanded ? (<MinusSquareIcon color="blue-700" size={14} />) : (<PlusSquareIcon color="blue-700" size={14} />)}
    </span>
  } as ColumnProps;

}

export default ExpandColumn;