import { Button, Popover, Select } from "antd";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
});

export default connect(
  mapStateToProps,
  null
)(function AllocationsBulkAssignmentComponent({
  disabled,
  bodyshop,
  handleAssignment,
  assignment,
  setAssignment,
  visibilityState
}) {
  const { t } = useTranslation();

  const onChange = (e) => {
    setAssignment({ ...assignment, employeeid: e });
  };

  const [visibility, setVisibility] = visibilityState;

  const popContent = (
    <div>
      <Select
        showSearch={{
          optionFilterProp: "label",
          filterOption: (input, option) => option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
        }}
        style={{ width: 200 }}
        placeholder="Select a person"
        onChange={onChange}
        options={bodyshop.employees.map((emp) => ({
          value: emp.id,
          label: `${emp.first_name} ${emp.last_name}`
        }))}
      />

      <Button type="primary" disabled={!assignment.employeeid} onClick={handleAssignment}>
        Assign
      </Button>
      <Button onClick={() => setVisibility(false)}>Close</Button>
    </div>
  );

  return (
    <Popover content={popContent} open={visibility}>
      <Button disabled={disabled} onClick={() => setVisibility(true)}>
        {t("allocations.actions.assign")}
      </Button>
    </Popover>
  );
});
