import * as React from "react";
import {
  GridColumnMenuProps,
  GridColumnMenuColumnsList,
} from "@progress/kendo-react-grid";
import { TabStrip, TabStripTab } from "@progress/kendo-react-layout";
import { filterIcon } from "@progress/kendo-svg-icons";
import { ColumnMenuContext } from "./column-menu-context";
import { TabStripTabTitle } from "./tab-strip-tab-title";
import { useContext } from "react";

export const ColumnMenu = (props: GridColumnMenuProps) => {
  const { onColumnsChange, columnsState, columns } =
    useContext(ColumnMenuContext);
  const { onCloseMenu = () => {} } = props;

  return (
    <TabStrip selected={0} animation={false}>
      <TabStripTab
        title={
          <TabStripTabTitle
            title="Columns"
            iconName="columns"
            svgIcon={filterIcon}
          />
        }
      >
        <GridColumnMenuColumnsList
          columnsState={columnsState}
          columns={columns}
          onColumnsChange={onColumnsChange}
          onCloseMenu={onCloseMenu}
        />
      </TabStripTab>
    </TabStrip>
  );
};