import React from 'react';
import { useTranslation } from 'react-i18next';
// import axios from 'axios';
import InviteLink from '../../common/InviteLink';
import Team from '../../icons/Team';
import { MyTeamProps } from '../../../model/components/profile';
// import CloseSmall from '../../icons/CloseSmall';
// import IconButton from '../../common/IconButton';
// import RoundedButton from '../../common/RoundedButton';
// import { CustomResponse } from '../../../model/common';

const MAX_TEAM_LENGTH = 10;

// const MyTeam: React.FC<MyTeamProps> = ({ user, team, onChangeTeam }) => {
const MyTeam: React.FC<MyTeamProps> = ({ user, team }) => {
  const { t } = useTranslation();

  // const [userToDelete, setUserToDelete] = useState<string>(null);
  // const [deletingUser, setDeletingUser] = useState<boolean>(false);

  // const onDeleteUser = (userId: string): void => {
  //   setDeletingUser(true);
  //   setUserToDelete(userId);
  // };

  // const onConfirmDelete = async (): Promise<void> => {
  //   await axios
  //     .post<CustomResponse<string>>('/api/deleteUserFromTeam', {
  //       userId: userToDelete,
  //     })
  //     .then(({ data: { ok, data } }) => {
  //       if (ok) {
  //         const editedTeam = team;
  //         editedTeam.users = team.users.filter(
  //           (teamUser) => teamUser._id !== data,
  //         );
  //         onChangeTeam(editedTeam);
  //       }
  //       setDeletingUser(false);
  //       setUserToDelete(null);
  //     });
  // };

  // const onCancelDelete = (): void => {
  //   setDeletingUser(false);
  //   setUserToDelete(null);
  // };

  return team ? (
    <div className="myTeam">
      <div className="title">
        <Team size="medium" />
        <h2>
          {t('YOUR_TEAM')}{' '}
          <span>{`${team.users.length}/${MAX_TEAM_LENGTH}`}</span>
        </h2>
      </div>
      <h3>{team.name}</h3>
      <InviteLink team={team.id} />
      <ul className="teamMembers">
        {team.users.map((teamUser) => {
          return teamUser._id === user._id ? (
            <li key={teamUser._id} className="teamItem isMe">
              <div className="infoWrapper">
                <p>{user.username}</p>
              </div>
            </li>
          ) : (
            <li key={teamUser._id} className="teamItem">
              <div className="infoWrapper">
                <p>{teamUser.username}</p>
                {/* <IconButton
                  title={t('DELETE')}
                  size="tiny"
                  onClick={(): void => onDeleteUser(teamUser._id)}
                  isDisabled={deletingUser}
                >
                  <CloseSmall />
                </IconButton> */}
              </div>
              {/* {deletingUser && userToDelete === teamUser._id ? (
                <div className="deleteUserConfirmation">
                  <p>{t('DELETE')}</p>
                  <div className="actions">
                    <RoundedButton
                      title={t('CONFIRM')}
                      size="small"
                      onClick={onConfirmDelete}
                    />
                    <RoundedButton
                      title={t('CANCEL')}
                      size="small"
                      className="grey"
                      onClick={onCancelDelete}
                    />
                  </div>
                </div>
              ) : null} */}
            </li>
          );
        })}
        {Array.from({ length: MAX_TEAM_LENGTH - team.users.length }, (_, i) => (
          <li key={i} className="teamItem empty" />
        ))}
      </ul>
    </div>
  ) : (
    <div className="myTeam">
      <div className="title">
        <Team size="medium" />
        <h2>{t('NO_TEAM')}</h2>
      </div>
    </div>
  );
};

export default MyTeam;