import React from "react";
import { Button, Dropdown, Menu } from "antd";
import dataSource from "./production-list-columns.data";
import { useTranslation } from "react-i18next";

import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectTechnician } from "../../redux/tech/tech.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  technician: selectTechnician,
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ProductionColumnsComponent);

export function ProductionColumnsComponent({
  columnState,
  technician,
  bodyshop,
  tableState,
}) {
  const [columns, setColumns] = columnState;
  const { t } = useTranslation();

  const handleAdd = (e) => {
    setColumns([
      ...columns,
      ...dataSource({
        bodyshop,
        technician,
        state: tableState,
        activeStatuses: bodyshop.md_ro_statuses.active_statuses,
      }).filter((i) => i.key === e.key),
    ]);
  };

  const columnKeys = columns.map((i) => i.key);
  const cols = dataSource({
    technician,
    state: tableState,
    activeStatuses: bodyshop.md_ro_statuses.active_statuses,
  });
  const menu = (
    <Menu
      onClick={handleAdd}
      style={{
        columnCount: Math.max(Math.floor(cols.length / 10), 1),
      }}
    >
      {cols
        .filter((i) => !columnKeys.includes(i.key))
        .map((item) => (
          <Menu.Item key={item.key} style={{ breakInside: "avoid" }}>
            {item.title}
          </Menu.Item>
        ))}
    </Menu>
  );
  return (
    <div>
      <Dropdown overlay={menu}>
        <Button>{t("production.actions.addcolumns")}</Button>
      </Dropdown>
    </div>
  );
}

// <Transfer
// dataSource={dataSource}
// titles={["Source", "Target"]}
// targetKeys={columns.map((c) => c.key)}
// render={(item) => item.title}
// onChange={(nextTargetKeys, direction, moveKeys) => {
//   setColumns(dataSource.filter((i) => nextTargetKeys.includes(i.key)));
// }}
// />
