import { FC, ChangeEvent } from 'react';

import {
  Field,
  Relative,
  User,
  Volunteer,
  DropdownOption,
} from 'src/types/nemakEvents';

import DropDownController from './formControls/DropDownController';
import TextBoxController from './formControls/TextBoxController';
import RuleTable from './RuleTable';
import TeamTable from './TeamTable';
import VolunteerTable from './VolunteerTable';

export type RuleTableProps = {
  field: Field;
  dropdownValues: DropdownOption[];
  realtivesInfo: Relative[];
  isTshirt: boolean;
  handleAddRelativeSize: (
    event: ChangeEvent<HTMLInputElement>,
    relative: Relative,
  ) => void;
  handleCheckboxChange: (relative: Relative, isChecked: boolean) => void;
  isSelected: (relative: Relative) => boolean;
  handleFetchUser: (id: number | string) => void;
  selectedUsers: User[];
  handleAddTeamSize: (
    event: ChangeEvent<HTMLInputElement>,
    index: number,
  ) => void;
  handleDeleteUser: (id: number | string) => void;
  handleAddVolunteer: (name: string) => void;
  selectedVolunteers: Volunteer[];
  handleDeleteVolunteer: (index: number) => void;
};

export const FieldRenderer: FC<RuleTableProps> = props => {
  const {
    field,
    dropdownValues,
    realtivesInfo,
    isTshirt,
    handleAddRelativeSize,
    handleCheckboxChange,
    isSelected,
    handleFetchUser,
    selectedUsers,
    handleAddTeamSize,
    handleDeleteUser,
    handleAddVolunteer,
    selectedVolunteers,
    handleDeleteVolunteer,
  } = props;

  const { FieldType, FieldName } = field;

  switch (FieldType) {
    case 'DropDown':
      const { FieldDisplayName, EventExtraFieldId } = field;
      return (
        <DropDownController
          name={EventExtraFieldId.toString()}
          label={FieldDisplayName}
          dropdownValues={dropdownValues[FieldName]}
          errorName={FieldName}
        />
      );
    case 'TextBox':
      return <TextBoxController field={field} />;
    case 'Rule':
      if (FieldName === 'IncludeRelatives' && realtivesInfo?.length > 0) {
        return (
          <RuleTable
            dropdownValues={dropdownValues}
            realtivesInfo={realtivesInfo}
            hasTshirt={isTshirt}
            onAddRelativeSize={handleAddRelativeSize}
            onCheckboxChange={handleCheckboxChange}
            isSelected={isSelected}
          />
        );
      }
      return null;
    case 'Table':
      if (FieldName === 'Team') {
        return (
          <TeamTable
            dropdownValues={dropdownValues}
            hasTshirt={isTshirt}
            handleFetchUser={handleFetchUser}
            selectedUsers={selectedUsers}
            onAddTeamSize={handleAddTeamSize}
            onDeleteUser={handleDeleteUser}
          />
        );
      } else if (FieldName === 'Volunteering') {
        return (
          <VolunteerTable
            handleAddVolunteer={handleAddVolunteer}
            selectedVolunteers={selectedVolunteers}
            handleDeleteVolunteer={handleDeleteVolunteer}
          />
        );
      }
      return null;
    default:
      return null;
  }
};

export default FieldRenderer;