import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { CommitteeContentProps } from '../../../model/components/committee';
import ArrowTop from '../../icons/ArrowTop';

const CommitteeContent: React.FC<CommitteeContentProps> = ({
  activeMember,
}) => {
  const [accordionOpen, setAccordionOpen] = useState<boolean>(false);

  const { t } = useTranslation();

  const { thumbnail, small, medium } = activeMember.image.formats;

  return (
    <article className="committeeContent">
      {activeMember.coordinator ? (
        <p className="coordinator">{t('COORDINATOR')}</p>
      ) : null}
      <button
        type="button"
        className={`accordionClick${accordionOpen ? ' open' : ''}`}
        onClick={(): void => setAccordionOpen(!accordionOpen)}
        title={activeMember.name}
      >
        {activeMember.name} <ArrowTop />
      </button>
      <div className={`accordionContent${accordionOpen ? ' open' : ''}`}>
        <div className="wrapper">
          <div className="imageWrapper">
            <img
              alt={activeMember.name}
              src={medium?.url || small?.url || thumbnail?.url}
            />
          </div>
          <p className="currentRing">{`${t('RING')} ${
            activeMember.ring.order
          } · ${activeMember.ring.title}`}</p>
          <div className="info">
            <h1 className="name">{activeMember.name}</h1>
            <h2 className="subtitle">{activeMember.subtitle}</h2>
            <span className="divider" />
            <h2 className="position">{activeMember.descriptionTitle}</h2>
          </div>
        </div>
        <div className="content">
          <p>{activeMember.description}</p>
        </div>
      </div>
    </article>
  );
};

export default CommitteeContent;