import React from 'react';
import { useTranslation } from 'react-i18next';
import { CommitteeRingsProps } from '../../../model/components/committee';
import CommitteeRingItem from './CommitteeRingItem';

const CommitteeRings: React.FC<CommitteeRingsProps> = ({
  rings,
  committeeMembers,
  activeMember,
  onChangeActiveMember,
}) => {
  const { t } = useTranslation();

  return (
    <article className="committeeRings">
      <div className="ringsPosition">
        {rings.map((item) => (
          <CommitteeRingItem
            key={item.order}
            title={item.title}
            number={item.order}
          >
            {committeeMembers.map((member, index) => {
              return member.ring.id === item.id ? (
                <button
                  key={member.name}
                  type="button"
                  className={`memberClick${
                    index === activeMember ? ' active' : ''
                  }`}
                  onClick={(): void => onChangeActiveMember(index)}
                >
                  {member.coordinator ? <span>{t('COORDINATOR')}</span> : null}
                  <p>
                    {member.abbreviation
                      ? `${member.name} (${member.abbreviation})`
                      : member.name}
                  </p>
                </button>
              ) : null;
            })}
          </CommitteeRingItem>
        ))}
      </div>
    </article>
  );
};

export default CommitteeRings;