import React, { useState, useEffect } from 'react';
import { DropdownButton, MenuItem } from 'react-bootstrap';
import { STATUS } from '../../constants/parcelStatuses';
import StatusDisplay from './StatusDisplay';

function StatusFilterDropdown(props) {
  const { rootClassName, value, onSelect } = props;
  const [selectedStatus, setSelectedStatus] = useState();

  useEffect(() => setSelectedStatus(value), [value]);

  return (
    <div className={rootClassName}>
      <DropdownButton
        id="filterStatus"
        title={
          selectedStatus ? (
            <StatusDisplay status={selectedStatus} />
          ) : (
            <span className="text-muted">Filter by status</span>
          )
        }
      >
        {Object.keys(STATUS).map((status) => (
          <MenuItem
            eventKey={status}
            key={status}
            onClick={() => {
              setSelectedStatus(status);
              onSelect(status);
            }}
          >
            <StatusDisplay status={status} />
          </MenuItem>
        ))}
      </DropdownButton>
    </div>
  );
}

export default StatusFilterDropdown;
