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

// locals
import Button from '../../../Button';
import ApiSignal from '../../../../signals/Api';
import { useSignal } from '../../../../signal';

/**
 * component workflow
 *
 * @param props 
 * @returns 
 */
const ComponentWorkflowFrameListItem = (props = {}) => {
  // signals
  const [api] = useSignal(ApiSignal);
  
  // return jsx
  return (
    <Link href={`/${props.item?.team}/workflows/${props.item?.workflow?.id}/${props.item.id}`} className="flex gap-x-6 justify-between items-center py-5 border-b cursor-pointer border-gray-100/10">
      <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.workflow?.name}</p>
          <p className="mt-1 text-xs leading-5 text-gray-500 truncate dark:text-gray-50">
            {api.translate('workflow:node.execution', `Execution #${props.item?.id}`, props.item)}
            {' '}
            &middot;
            {' '}
            {props.item.endedAt ? (
              api.translate(`node:state.${props.item.state || 'executing'}`, props.item.state, {
                date     : moment(props.item.endedAt).fromNow(),
                duration : moment.duration(moment(props.item.endedAt).diff(moment(props.item.createdAt))).humanize(),
              })
            ) : (
              api.translate('node:state.executing', 'Executing', {
                date : moment(props.item.createdAt).fromNow(),
              })
            )}
            {' '}
            &middot;
            {' '}
            {api.translate('workflow:node.nodes', `${props.item?.stats?.nodes || props.item?.path?.length || 0} nodes`, {
              count : (props.item?.stats?.nodes || props.item?.path?.length || 0).toLocaleString(),
            })}
          </p>
        </div>
      </div>
      <div>
        <Button
          color={props.item.state === 'completed' ? 'success' : (
            props.item.state === 'failed' ? 'error' : 'primary'
          )}
        >
          {api.translate(`node:state.${props.item.state || 'executing'}`, props.item.state || 'Executing')}
        </Button>
      </div>
      <IconArrowCircleRight className="flex-none w-5 h-5 text-gray-400 dark:text-gray-50" aria-hidden="true" />
    </Link>
  );
};

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