// imports
import Link from 'next/link';
import React from 'react';
import moment from 'moment';

// locals
import IconTick from '../../../icons/Tick';
import ApiSignal from '../../../signals/Api';
import { useSignal } from '../../../signal';
import { current as TeamSignal } from '../../../signals/Teams';

/**
 * component node
 *
 * @param props 
 * @returns 
 */
const ComponentNodeListItem = (props = {}) => {
  // api
  const [api] = useSignal(ApiSignal);
  const [team] = useSignal(TeamSignal);
  
  // return jsx
  return (
    <div className="overflow-hidden col-span-1 divide-y divide-gray-200 dark:divide-gray-100/10 card">
      <div className="flex justify-between items-center p-6 space-x-6 w-full">
        <div className="flex-1 truncate">
          <div className="flex items-center space-x-3">
            <h3 className="text-sm font-medium truncate">
              {props.item?.name || ''}
            </h3>
            {!!props.item?.default && (
              <span className="inline-flex flex-shrink-0 items-center rounded-full bg-green-100 px-1.5 py-0.5 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">
                <IconTick className="mr-1 w-4 h-4" />
                {api.translate('node:button.verified', 'Verified')}
              </span>
            )}
          </div>
          <p className="mt-2 text-sm text-gray-500 truncate dark:text-gray-50">
            {props.item?.description || ''}
          </p>
          <p className="mt-2 text-sm text-gray-500 truncate dark:text-gray-50">
            {api.translate('node:button.created', 'Created', {
              date : moment(props.item?.createdAt).fromNow(),
            })}
          </p>
        </div>
      </div>
      <div>
        <div className="flex -mt-px divide-x divide-gray-200 dark:divide-gray-100/10">
          <div className="flex flex-1 -ml-px w-0">
            <Link
              href={`/${team?.id}/nodes/${props.item?.id}/clone`}
              className="inline-flex relative flex-1 gap-x-3 justify-center items-center py-4 w-0 text-sm font-semibold rounded-br-lg border border-transparent transition-all duration-300 hover:bg-gray-200/20 hover:dark:bg-gray-100/10"
            >
              {api.translate('node:button.clone', 'Clone')}
            </Link>
          </div>
          {!!(props.item?.team === team?.id) && (
            <div className="flex flex-1 -ml-px w-0">
              <Link
                href={`/${props.item?.team}/nodes/${props.item?.id}`}
                className="inline-flex relative flex-1 gap-x-3 justify-center items-center py-4 w-0 text-sm font-semibold rounded-br-lg border border-transparent transition-all duration-300 hover:bg-gray-200/20 hover:dark:bg-gray-100/10"
              >
                {api.translate('node:button.update', 'Update')}
              </Link>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

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