import { useNavigate, useParams } from 'react-router-dom';
import { PATHS as HOMEPAGE } from 'pages/root/HomePage';
import { useQuery } from '@apollo/client';
import { ALLIANCE } from 'components/alliance/schema/queries';
import { AllianceQuery, AllianceQueryVariables } from 'types/graphql';

import { useModal } from 'components/layers';
import { usePopup } from 'components/layers';

import { Box, Badge, Spinner } from 'components/common';
import { MenuIconButton } from 'components/MenuIconButton';
import { FlyoutMenu } from 'components/FlyoutMenu';
import {
  LeaveAllianceModal,
  RemoveMemberModal,
} from 'components/alliance/modals';

interface AllianceMemberMenuProps {
  allianceId: string;
  memberId: string;
  type: string;
  onDismiss?: () => void;
}

const AllianceMemberMenu = ({
  allianceId,
  memberId,
  type,
  onDismiss,
}: AllianceMemberMenuProps) => {
  const navigate = useNavigate();

  const label = type === 'leave' ? 'Leave alliance' : 'Remove member';
  const Modal = type === 'leave' ? LeaveAllianceModal : RemoveMemberModal;
  const onComplete =
    type === 'leave' ? () => navigate(`/${HOMEPAGE.multiplayer}`) : undefined;

  const removeMemberModal = useModal(Modal, {
    defaultProps: {
      allianceId: allianceId,
      memberId: memberId,
      onComplete: onComplete,
    },
  });

  return (
    <FlyoutMenu
      options={[
        {
          label: label,
          value: type,
          onClick: () => removeMemberModal.show(),
        },
      ]}
      onDismiss={onDismiss}
      key="AllianceMemberMenu"
    />
  );
};

interface MembersListProps {
  allianceId: string;
  data: AllianceQuery['alliance']['members'];
  isOwner: boolean;
}

const MembersList = ({ allianceId, data, isOwner }: MembersListProps) => {
  const allianceMemberMenu = usePopup(AllianceMemberMenu, {
    defaultProps: { allianceId: allianceId },
    placement: 2,
    alignment: 1,
  });

  return (
    <Box spacingY={2}>
      {data?.map((member) => {
        const isDisabled = (!isOwner && !member.me) || (isOwner && member.me);

        return (
          <Box
            className="fz14"
            style={{ borderBottom: '1px solid var(--borderColor)' }}
            display="flex"
            // paddingX={4}
            paddingY={2}
            spacing={2}
            key={member.id}
          >
            <div className="w100" title="Name">
              {member.name}
              {member.me ? ' (You)' : ''}
            </div>
            <div className="w100" title="Company">
              {member.company || '—'}
            </div>
            <div className="w100" title="Email">
              {member.email}
            </div>
            <div className="w100 spacing2" title="Role">
              <Badge
                className="fz12"
                title="Member role"
                color={
                  member.pending
                    ? 'blue'
                    : member.role === 'owner'
                    ? 'orange'
                    : 'gray'
                }
                uppercase
              >
                {member.pending ? 'Pending' : member.role}
              </Badge>
            </div>
            <MenuIconButton
              onClick={(ev) =>
                allianceMemberMenu.toggle(ev.currentTarget, {
                  memberId: member.id,
                  type: isOwner ? 'remove' : 'leave',
                })
              }
              disabled={isDisabled}
            />
          </Box>
        );
      })}
    </Box>
  );
};

export const AllianceMembers = () => {
  const { allianceId } = useParams();
  const { data, loading } = useQuery<AllianceQuery, AllianceQueryVariables>(
    ALLIANCE,
    {
      skip: !allianceId,
      variables: { allianceId: allianceId! },
      fetchPolicy: 'cache-and-network',
      nextFetchPolicy: 'cache-first',
    }
  );

  return (
    <Box padding={4}>
      {data && (
        <MembersList
          allianceId={allianceId!}
          data={data.alliance.members}
          isOwner={data.alliance.createdBy.me}
        />
      )}
      <Spinner show={loading} />
    </Box>
  );
};