import { useState } from 'react';
import { Link } from 'react-router-dom';
import { useMutation } from '@apollo/client';
import { ALLIANCE_REPLY } from 'components/alliance/schema/mutations';
import { ALL_ALLIANCES } from 'components/alliance/schema/queries';
import {
  AllianceReplyMutation,
  AllianceReplyMutationVariables,
} from 'types/graphql';

import { useModal } from 'components/layers';

import { Box, Button } from 'components/common';
import {
  AllianceMembersModal,
  InviteMemberModal,
} from 'components/alliance/modals';

import { formatNumber, formatDate } from 'utils';
import { maybePluralize } from 'utils/maybePluralize';

const AllianceItemButtons = ({ allianceId }: { allianceId: string }) => {
  const [state, setState] = useState<boolean>();
  const [reply, mutation] = useMutation<
    AllianceReplyMutation,
    AllianceReplyMutationVariables
  >(ALLIANCE_REPLY, {
    refetchQueries: [{ query: ALL_ALLIANCES }],
    awaitRefetchQueries: true,
  });

  const respond = async (response: boolean) => {
    try {
      await reply({
        variables: { allianceId, reply: response },
      });
    } catch (error) {
      console.error(error);
    }
  };

  const accept = () => {
    setState(true);
    respond(true);
  };

  const decline = () => {
    setState(false);
    respond(false);
  };

  const loading = mutation.loading;

  return (
    <Box className="nowrap" spacing={2}>
      <Button onClick={accept} size="s" disabled={loading}>
        {loading && state === true ? 'Accepting...' : 'Accept'}
      </Button>
      <Button onClick={decline} size="s" color="gray" disabled={loading}>
        {loading && state === false ? 'Declining...' : 'Decline'}
      </Button>
    </Box>
  );
};

type Member = {
  name: string;
  me: boolean;
};

export interface AlliancePageItemProps {
  id: string;
  name: string;
  description: string;
  totalProfiles: number;
  status: string;
  dateCreated: string;
  createdBy: Member;
  members: Member[];
}

export const AlliancePageItem = (props: AlliancePageItemProps) => {
  const pending = props.status === 'pending';

  const allianceMembersModal = useModal(AllianceMembersModal, {
    defaultProps: {
      allianceId: props.id,
      createdByMe: props.createdBy?.me,
    },
  });

  const inviteMemberModal = useModal(InviteMemberModal, {
    defaultProps: { allianceId: props.id },
  });

  return (
    <Box className="hover rounded4 fz14" display="flex" padding={4}>
      <div className="w100">
        {pending ? (
          <span className="tdn medium truncate disabled">{props.name}</span>
        ) : (
          <Link
            className="tdn medium truncate"
            to={props.id}
            title={props.description}
          >
            {props.name}
          </Link>
        )}
      </div>
      <div className="marginX4 tac nowrap">
        <span className="bold c-gray" title="Total profiles">
          {props.totalProfiles ? formatNumber(props.totalProfiles) : '—'}
        </span>
      </div>
      <div className="w100 flex alignCenter justifyEnd spacing4">
        {pending ? (
          <span className="flex alignCenter spacing2">
            <span className="truncate">
              {props.createdBy.name} invited you to join data alliance
            </span>
            <AllianceItemButtons allianceId={props.id} />
          </span>
        ) : props.members?.length === 1 ? (
          <span className="fz14 link" onClick={() => inviteMemberModal.show()}>
            Invite member
          </span>
        ) : (
          <span
            className="fz14 link"
            onClick={() => allianceMembersModal.show()}
          >
            {maybePluralize(props.members?.length, 'member')}
          </span>
        )}
        <span className="fz14 truncate">{formatDate(props.dateCreated)}</span>
      </div>
    </Box>
  );
};