import { useState, useEffect } from 'react';
import cx from "../../../../utils/css/cx.js";
import { ScrollArea } from "../../../structure/index.js";
import ElectionLink from "../../ElectionLink/index.js";
import Call from '../Call';
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const CallList = function CallList(props) {
  const {
    animationKey,
    duration,
    importantParty,
    link,
    withShadow,
    force = false,
    calls
  } = props;
  const [isActive, setIsActive] = useState(false);
  useEffect(() => {
    setIsActive(true);
    const timer = setTimeout(() => setIsActive(false), duration);
    return () => clearTimeout(timer);
  }, [animationKey, duration]);
  const active = isActive && calls.length > 0;
  return <div className={cls('callList', importantParty, {
    important: !!importantParty,
    isActive: active || force,
    withShadow
  })}>
      <ElectionLink to={link}>
        <ScrollArea scroll="x" palette="warmgray">
          <div className={cls('content')}>
            <div className={classes.timestamp}>
              Just now
            </div>
            <div className={classes.list}>
              {calls.map(call => <Call key={call.id} call={call} important={!!importantParty} />)}
            </div>
          </div>
        </ScrollArea>
      </ElectionLink>
    </div>;
};
export default CallList;