import { Select, Button, Popover, InputNumber } from "antd";
import React from "react";
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 function AllocationsAssignmentComponent({
  bodyshop,
  handleAssignment,
  assignment,
  setAssignment,
  visibilityState,
  maxHours
}) {
  const { t } = useTranslation();

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

  const [visibility, setVisibility] = visibilityState;

  const popContent = (
    <div>
      <Select id="employeeSelector"
        showSearch
        style={{ width: 200 }}
        placeholder='Select a person'
        optionFilterProp='children'
        onChange={onChange}
        filterOption={(input, option) =>
          option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
        }>
        {bodyshop.employees.map(emp => (
          <Select.Option value={emp.id} key={emp.id}>
            {`${emp.first_name} ${emp.last_name}`}
          </Select.Option>
        ))}
      </Select>
      <InputNumber
        defaultValue={assignment.hours}
        placeholder={t("joblines.fields.mod_lb_hrs")}
        max={parseFloat(maxHours)}
        min={0}
        onChange={e => setAssignment({ ...assignment, hours: e })}
      />

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

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

export default connect(mapStateToProps, null)(AllocationsAssignmentComponent);