// imports
import React from 'react';
import moment from 'moment';
import { IconArrowCircleRight } from '@chirper/react/src/icons';

// team
import ApiSignal from '../../../signals/Api';
import { useSignal } from '../../../signal';
import { member as MemberSignal } from '../Modal';

/**
 * component node
 *
 * @param props 
 * @returns 
 */
const ComponentNodeListItem = (props = {}) => {
  // signals
  const [api] = useSignal(ApiSignal);
  const [,setMember] = useSignal(MemberSignal);

  // return jsx
  return (
    <div className="flex gap-x-6 justify-between items-center py-5 border-b cursor-pointer border-gray-100/10" onClick={() => setMember(props.item)}>
      <div className="flex flex-1 gap-x-4 min-w-0">
        <div className="flex-auto min-w-0">
          <p className="text-sm font-semibold leading-6">{props.item.email || props.item.name || props.item.user?.name || props.item.user?.email}</p>
          <p className="mt-1 text-xs leading-5 text-gray-500 truncate dark:text-gray-50">
            {api.translate('team:button.created', 'Created')} <time dateTime={props.item.createdAt}>{moment(props.item.createdAt).fromNow()}</time>
          </p>
        </div>
      </div>
      <div className="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
        <p className="text-sm leading-6">{props.item?.user ? api.translate(`team:role.${props.item.role}`, props.item.role) : api.translate('team:role.pending', 'Pending')}</p>
        <p className="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-50">
          Last seen <time dateTime={props.item.user?.updatedAt}>{moment(props.item.user?.updatedAt).fromNow()}</time>
        </p>
      </div>
      <IconArrowCircleRight className="flex-none w-5 h-5 text-gray-400 dark:text-gray-50" />
    </div>
  );
};

/**
 * export default
 */
export default React.memo(ComponentNodeListItem);