import SubjectItem from './subject-item';
import { useMemo, useCallback } from 'react';
import './index.scss';

const SubjectItemList = ({
  subjects,
  multiple,
  setIndexState,
  currentValue,
  pushHistoryByPage,
}) => {
  const isChecked = useCallback(
    (subjectId) => {
      return currentValue.some(({ _id }) => _id === subjectId);
    },
    [currentValue],
  );

  const handleCheckSubject = useCallback(
    (subject) => {
      if (isChecked(subject._id)) {
        setIndexState(
          'currentValue',
          currentValue.filter(({ _id }) => _id !== subject._id),
        );
      } else {
        setIndexState('currentValue', [...currentValue, subject]);
      }
    },
    [currentValue, isChecked, setIndexState],
  );

  const handleRouteMembers = useCallback(
    (subject) => {
      switch (subject.memberType) {
        case 'group':
          pushHistoryByPage('groupMembers', { group: subject });
          break;
        case 'role':
          pushHistoryByPage('roleMembers', { role: subject });
          break;
        default:
          break;
      }
    },
    [pushHistoryByPage],
  );

  const handleClickSubject = useCallback(
    (subject) => {
      if (multiple) {
        handleCheckSubject(subject);
      } else {
        handleRouteMembers(subject);
      }
    },
    [handleCheckSubject, handleRouteMembers, multiple],
  );

  const subjectItems = useMemo(() => {
    return subjects.map((subject) => (
      <SubjectItem
        key={subject._id}
        checked={isChecked(subject._id)}
        onClick={() => handleClickSubject(subject)}
        onClickArrow={() => handleRouteMembers(subject)}
        data={subject}
        multiple={multiple}
      />
    ));
  }, [handleClickSubject, handleRouteMembers, isChecked, multiple, subjects]);

  return <div>{subjectItems}</div>;
};

export default SubjectItemList;