import { Select } from "antd";
import { STATUS_LABEL_MAPPER, STATUSES } from "../config";

const statusOptions = [
  { label: STATUS_LABEL_MAPPER[STATUSES.pending], value: STATUSES.pending },
  {
    label: STATUS_LABEL_MAPPER[STATUSES.onApproval],
    value: STATUSES.onApproval,
  },
  { label: STATUS_LABEL_MAPPER[STATUSES.working], value: STATUSES.working },
  { label: STATUS_LABEL_MAPPER[STATUSES.cancelled], value: STATUSES.cancelled },
];

export const StatusSelect = ({ value, onChange, disabled }) => {
  const handleClick = (e) => e.stopPropagation();

  const handleChange = (value) => {
    onChange(value);
  };

  return (
    <Select
      style={{
        width: 250,
      }}
      value={value}
      onChange={handleChange}
      options={statusOptions}
      disabled={disabled}
      placeholder="Выберите статус"
      onClick={handleClick}
    />
  );
};