// imports
import clsx from 'clsx';
import ComponentLoading from '@chirper/react/src/components/Loading';
import React, { useState } from 'react';

// locals
import useTeam from '../../../hooks/useTeam';
import ApiSignal from '../../../signals/Api';
import useResults from '../../../hooks/useResults';
import TeamAvatar from '../Avatar';
import { useSignal } from '../../../signal';

/**
 * component channel select
 *
 * @param props 
 */
const ComponentTeamSelect = (props = {}) => {
  // api
  const [sApi] = useSignal(ApiSignal);

  // team
  const team = useTeam();

  // state
  const [search, setSearch] = useState('');
  
  // items
  const {
    resetting,
    items : members,

    onItem,
    loadNext,
  } = useResults(sApi.Team.Member.list, 'members', {
    sort    : props.sort,
    team    : team?.id,
    mine    : false,
    search  : search,
    disable : !team?.id,
  }, null, props.onResult);

  // return jsx
  return (
    <div>
      
      <div className="flex flex-col space-y-3">
        {members.map((member) => (
          <div key={member.id} onClick={() => props.onSelect(member)} className={clsx(
            'flex cursor-pointer flex-row px-3 py-2 space-x-3 w-full rounded-lg items-center hover:bg-gray-500',
            (props.loading === member.id) && '!bg-gray-400'
          )}>
            <div>
              <TeamAvatar member={member} className="w-10 h-10" />
            </div>
            <div className="flex-1 text-left">
              {member.agent?.id ? (
                <>
                  <div className="font-semibold">
                    {member.agent?.name}
                  </div>
                  <div className="text-xs text-muted">
                    AI Agent 
                  </div>
                </>
              ) : (
                <>
                  <div className="font-semibold">
                    {member.user?.name || member.user?.email}
                  </div>
                  <div className="text-xs text-muted">
                    {member.user?.email}
                  </div>
                </>
              )}
            </div>
            {props.loading === member.id && (
              <div>
                <ComponentLoading
                  className="w-8 h-8 fill-white"
                />
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
};

/** 
 * export default
 */
export default ComponentTeamSelect;