import { useNavigate } from 'react-router-dom';
import { PATHS as HOMEPAGE } from 'pages/root/HomePage';
import { useFragmentQuery } from 'lib/apollo/useFragmentQuery';
import { alliance } from '../schema/fragments';
import { AllianceFragment } from 'types/graphql';

import { useModal } from 'components/layers';

import { Box, Button, Heading } from 'components/common';
import { InviteMemberModal } from './InviteMemberModal';
import { RemoveMemberModal } from './RemoveMemberModal';
import { LeaveAllianceModal } from './LeaveAllianceModal';
import { call } from 'utils/call';

const AllianceMember = (props: {
  id: string;
  me: boolean;
  name: string;
  role: string | null;
  pending: boolean | null;
  createdByMe: boolean;
  onLeave: (id: string) => void;
  onRemove: (id: string) => void;
}) => {
  return (
    <div
      className="flex justifyBetween paddingX4 paddingY2 hover1 fz14"
      title={`${props.role}${props.pending ? ': pending approval' : ''}`}
    >
      <span>
        {props.name}
        {props.me ? ' (You)' : ''}
      </span>

      {props.me && props.role !== 'owner' ? (
        <span className="fz12 cup" onClick={() => props.onLeave(props.id)}>
          leave
        </span>
      ) : props.createdByMe && !props.me ? (
        <span className="fz12 cup" onClick={() => props.onRemove(props.id)}>
          remove
        </span>
      ) : null}
    </div>
  );
};

interface AllianceMembersModalProps {
  allianceId: string;
  createdByMe: boolean;
  onDismiss?: () => void;
}

export const AllianceMembersModal = ({
  allianceId,
  createdByMe,
  onDismiss,
}: AllianceMembersModalProps) => {
  const navigate = useNavigate();
  const data = useFragmentQuery<AllianceFragment>(alliance, allianceId);

  const inviteMemberModal = useModal(InviteMemberModal, {
    defaultProps: { allianceId },
  });
  const removeMemberModal = useModal(RemoveMemberModal, {
    defaultProps: { allianceId },
  });
  const leaveAllianceModal = useModal(LeaveAllianceModal, {
    defaultProps: {
      allianceId,
      onComplete: () => {
        call(onDismiss);
        navigate(`/${HOMEPAGE.multiplayer}`);
      },
    },
  });

  return (
    <Box className="bg-white rounded4 shadow" width={400}>
      <Heading
        align="center"
        className="padding4"
        style={{ borderBottom: '1px solid var(--borderColor)' }}
      >
        Alliance members
      </Heading>
      <Box>
        {data?.members.map((member) => {
          return (
            <AllianceMember
              {...member}
              onRemove={(memberId: string) =>
                removeMemberModal.show({ memberId })
              }
              onLeave={(memberId: string) =>
                leaveAllianceModal.show({ memberId })
              }
              createdByMe={createdByMe}
              key={member.id}
            />
          );
        })}
      </Box>
      <Box padding={4} spacingY={2}>
        {createdByMe && (
          <Button onClick={() => inviteMemberModal.show()} block>
            Invite
          </Button>
        )}
        <Button onClick={onDismiss} color="gray" block>
          Close
        </Button>
      </Box>
    </Box>
  );
};