import React from 'react';
import { useTransition, config } from 'react-spring';
import { CheckInListWrapper, CheckIn, UserAvatar } from './LiveEventElements';
import TimeAgo from 'timeago-react';
import * as timeago from 'timeago.js';
import { LoadingSpinner } from '../../components';

import he from 'timeago.js/lib/lang/he';
timeago.register('he', he);

function CheckInList({ checkIns }) {
  const transitions = useTransition(checkIns, (item) => item?.id, {
    config: config.gentle,
    from: { opacity: 0, transform: 'translate3d(25%, 0%, 0px)' },
    enter: { opacity: 1, transform: 'translate3d(0%, 0px, 0px)' },
    leave: { opacity: 0, height: 0, transform: 'translate3d(-25%, 0px, 0px)' },
  });

  return (
    <CheckInListWrapper>
      {checkIns?.length > 0 ? (
        transitions.map(({ item, props, key }, i) => (
          <CheckIn key={key} style={i === 0 ? props : {}}>
            <UserAvatar src={item.pictureUrl === '' ? '/anonymousPofile.png' : item.pictureUrl} />
            <CheckIn.Info>
              <CheckIn.Name>
                {item.firstName} {item.lastName}
              </CheckIn.Name>
              <CheckIn.Location>ב{item.protestCityName || item.protestStreetAddress}</CheckIn.Location>
            </CheckIn.Info>
            {item.userMessage && <CheckIn.Comment>{item.userMessage}</CheckIn.Comment>}
            <CheckIn.TimeAgo>
              <TimeAgo datetime={item.createdAt} locale="he" />
            </CheckIn.TimeAgo>
          </CheckIn>
        ))
      ) : (
        <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column' }}>
          <span>טוען...</span>
          <LoadingSpinner style={{ marginTop: 15 }} />
        </div>
      )}
    </CheckInListWrapper>
  );
}

export default CheckInList;