/**
 * Component for generating GrouperAlgoSettings for input to dce-live-grouper.
 * @author Benedikt Arnarsson
 */

// Import React
import React from 'react';

// Import DCE reactkit
import { ButtonInputGroup, Drawer, RadioButton } from '../../../dce-reactkit';

// Import Grouper
import { GrouperAlgorithm } from 'dce-live-grouper';

/*------------------------------------------------------------------------*/
/* -------------------------------- Types ------------------------------- */
/*------------------------------------------------------------------------*/

// Props definition
type Props = {
  // Chosen GrouperAlgorithm
  grouperAlgorithm: GrouperAlgorithm,
  // Set the chosen GrouperAlgorithm
  setGrouperAlgorithm: (grouperAlgorithm: GrouperAlgorithm) => void,
  // Maximum number of students per group, when FixedGroupSize is chosen
  capacity: number,
  // Set the chosen capacity
  setCapacity: (capacity: number) => void,
  // Maximum number of groups, when FixedNumGroups is chosen
  maxGroups: number,
  // Set the chosen maxGroups
  setMaxGroups: (maxGroups: number) => void,
};

/*------------------------------------------------------------------------*/
/* ------------------------------ Component ----------------------------- */
/*------------------------------------------------------------------------*/

const AlgoSettingsInput: React.FC<Props> = (props) => {
  /*------------------------------------------------------------------------*/
  /* -------------------------------- Setup ------------------------------- */
  /*------------------------------------------------------------------------*/

  /* -------------- Props ------------- */

  // Destructure all props
  const {
    grouperAlgorithm,
    setGrouperAlgorithm,
    capacity,
    setCapacity,
    maxGroups,
    setMaxGroups,
  } = props;

  /*------------------------------------------------------------------------*/
  /* ------------------------------- Render ------------------------------- */
  /*------------------------------------------------------------------------*/

  /*----------------------------------------*/
  /* ---------------- Views --------------- */
  /*----------------------------------------*/

  // Body that will be filled with the current view
  let body: React.ReactNode;

  /* ------------ Capacity ------------ */

  if (grouperAlgorithm === GrouperAlgorithm.FixedGroupSize) {
    // Create body
    body = (
      <div className="input-group mb-3">
        <span className="input-group-text">Set group size:</span>
        <input
          type="number"
          className="form-control"
          id="DCHUI-input-max-group-size"
          placeholder="Max group size"
          value={capacity}
          onChange={(e) => {
            const newCapacity = Number.parseInt(e.target.value, 10);
            setCapacity(newCapacity);
          }}
        />
      </div>
    );
  }

  /* ----------- MaxGroups ------------ */

  if (grouperAlgorithm === GrouperAlgorithm.FixedNumGroups) {
    // Create body
    body = (
      <div className="input-group mb-3">
        <span className="input-group-text">Set number of groups:</span>
        <input
          type="number"
          className="form-control"
          id="DCHUI-input-max-number-of-groups"
          placeholder="Max number of groups"
          value={maxGroups}
          onChange={(e) => {
            const newMaxGroups = Number.parseInt(e.target.value, 10);
            setMaxGroups(newMaxGroups);
          }}
        />
      </div>
    );
  }

  /*----------------------------------------*/
  /* --------------- Main UI -------------- */
  /*----------------------------------------*/

  return (
    <div>
      {/* Pick the Algorithm */}
      <ButtonInputGroup
        label="Prioritize"
        minLabelWidth="7rem"
      >
        <RadioButton
          id="DCHUI-Prioritize-select-fixed-group-size"
          text="Group Size"
          ariaLabel="prioritize having a maximum group size"
          onSelected={() => {
            setGrouperAlgorithm(GrouperAlgorithm.FixedGroupSize);
          }}
          small
          selected={grouperAlgorithm === GrouperAlgorithm.FixedGroupSize}
        />
        <RadioButton
          id="DCHUI-Prioritize-select-fixed-number-of-groups"
          text="Number of Groups"
          ariaLabel="prioritize having a fixed number of groups"
          onSelected={() => {
            setGrouperAlgorithm(GrouperAlgorithm.FixedNumGroups);
          }}
          small
          selected={grouperAlgorithm === GrouperAlgorithm.FixedNumGroups}
        />
      </ButtonInputGroup>

      {/* Input the values */}
      <Drawer>
        {body}
      </Drawer>
    </div>
  );
};

/*------------------------------------------------------------------------*/
/* ------------------------------- Wrap Up ------------------------------ */
/*------------------------------------------------------------------------*/

// Export component
export default AlgoSettingsInput;