// imports
import React from 'react';
import moment from 'moment';
import { IconX, IconDiscord, IconTelegram, IconPlus } from '@chirper/react/src/icons';

// locals
import Button from '../../Button';
import useTeam from '../../../hooks/useTeam';
import ApiSignal from '../../../signals/Api';
import { agent } from '../Modal';
import { useSignal } from '@chirper/react/src/signal';

/**
 * agent list item
 */
const ComponentAgentListItem = (props = {}) => {
  // set agent
  const [api] = useSignal(ApiSignal);
  const [,setAgent] = useSignal(agent);

  // team
  const team = useTeam();

  // return agent
  return (
    <div className="overflow-hidden col-span-1 divide-y divide-gray-200 dark:divide-gray-100/10 card">
      <div className="p-6">
        {/* Main content section */}
        <div className="flex space-x-6">
          {/* Avatar */}
          <div className="overflow-hidden w-24 h-24 min-w-24 card">
            {!!props.item?.image?.url && (
              <img
                src={props.item.image.url}
                alt={props.item.name}
                className="object-cover w-full h-full transition-transform duration-300 transform-gpu group-hover:scale-105"
              />
            )}
          </div>

          {/* Info section */}
          <div className="flex-1">
            <div className="flex justify-between">
              <div className="flex-1">
                <h3 className="text-lg font-medium">
                  {props.item?.name || 'Anonymous Agent'}
                </h3>
                {!!props.item?.prompt && (
                  <p className="mt-1 text-sm line-clamp-2 whitespace-pre">
                    {props.item.prompt}
                  </p>
                )}
                <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                  Created {moment(props.item?.createdAt).fromNow()}
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Social links */}
        <div className="flex gap-2 mt-4">
          <Button>
            <IconPlus className="w-4 h-4 mr-2" />
            {api.translate('agent:button.skill', 'Add Skill')}
          </Button>
        </div>
      </div>
      <div>
        <div className="flex -mt-px divide-x divide-gray-200 dark:divide-gray-100/10">
          {!!(props.item?.team === team?.id) && (
            <div className="flex flex-1 -ml-px w-0">
              <button
                onClick={() => setAgent(props.item)}
                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('agent:button.update', 'Update')}
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default React.memo(ComponentAgentListItem);