import React from "react";
import { Button, Dropdown } 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";
import { useSplitTreatments } from "@splitsoftware/splitio-react";

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, data, tableState, refetch }) {
  const [columns, setColumns] = columnState;
  const { t } = useTranslation();
  const {
    treatments: { Enhanced_Payroll }
  } = useSplitTreatments({
    attributes: {},
    names: ["Enhanced_Payroll"],
    splitKey: bodyshop.imexshopid
  });
  const handleAdd = (e) => {
    setColumns([
      ...columns,
      ...dataSource({
        bodyshop,
        technician,
        state: tableState,
        data,
        activeStatuses: bodyshop.md_ro_statuses.active_statuses,
        treatments: { Enhanced_Payroll }
      }).filter((i) => i.key === e.key)
    ]);
  };

  const columnKeys = columns.map((i) => i.key);
  const cols = dataSource({
    technician,
    data,
    state: tableState,
    activeStatuses: bodyshop.md_ro_statuses.active_statuses,
    refetch,
    treatments: { Enhanced_Payroll }
  });

  const menu = {
    items: cols
      .filter((i) => !columnKeys.includes(i.key))
      .map((item) => ({
        key: item.key,
        label: item.title,
        style: { breakInside: "avoid" }
      })),
    style: {
      columnCount: Math.max(Math.floor(cols.length / 10), 1)
    },
    onClick: handleAdd
  };

  return (
    <div>
      <Dropdown menu={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)));
// }}
// />
