import React from 'react';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';

import Account from '@/components/account';
import ScrollableList from '@/components/scrollable-list';
import Button from '@/components/ui/button';
import Column from '@/components/ui/column';
import HStack from '@/components/ui/hstack';
import Spinner from '@/components/ui/spinner';
import ColumnForbidden from '@/features/ui/components/column-forbidden';
import { groupBlocksRoute } from '@/features/ui/router';
import { useAccount } from '@/queries/accounts/use-account';
import { useGroupQuery } from '@/queries/groups/use-group';
import { useGroupBlocks, useUnblockGroupUserMutation } from '@/queries/groups/use-group-blocks';
import toast from '@/toast';

const messages = defineMessages({
  heading: { id: 'column.group_blocked_members', defaultMessage: 'Banned members' },
  unblock: { id: 'group.group_mod_unblock', defaultMessage: 'Unban' },
  unblocked: {
    id: 'group.group_mod_unblock.success',
    defaultMessage: 'Unbanned @{name} from group',
  },
});

interface IBlockedMember {
  accountId: string;
  groupId: string;
}

const BlockedMember: React.FC<IBlockedMember> = ({ accountId, groupId }) => {
  const intl = useIntl();
  const { data: account } = useAccount(accountId);

  const { mutate: unblockGroupUser } = useUnblockGroupUserMutation(groupId, accountId);

  if (!account) return null;

  const handleUnblock = () => {
    unblockGroupUser(undefined, {
      onSuccess: () => {
        toast.success(intl.formatMessage(messages.unblocked, { name: account.acct }));
      },
    });
  };

  return (
    <HStack space={1} alignItems='center' justifyContent='between' className='p-2.5'>
      <div className='w-full'>
        <Account account={account} withRelationship={false} />
      </div>

      <Button
        theme='secondary'
        text={intl.formatMessage(messages.unblock)}
        onClick={handleUnblock}
      />
    </HStack>
  );
};

const GroupBlockedMembers: React.FC = () => {
  const { groupId } = groupBlocksRoute.useParams();

  const intl = useIntl();

  const { data: group } = useGroupQuery(groupId, true);
  const { data: accountIds } = useGroupBlocks(groupId);

  if (!group || !group.relationship || !accountIds) {
    return (
      <Column label={intl.formatMessage(messages.heading)}>
        <Spinner />
      </Column>
    );
  }

  if (
    !group.relationship.role ||
    !['owner', 'admin', 'moderator'].includes(group.relationship.role)
  ) {
    return <ColumnForbidden />;
  }

  const emptyMessage = (
    <FormattedMessage
      id='empty_column.group_blocks'
      defaultMessage="The group hasn't banned any users yet."
    />
  );

  return (
    <Column
      label={intl.formatMessage(messages.heading)}
      backHref='/groups/$groupId/manage'
      backParams={{ groupId: group.id }}
    >
      <ScrollableList scrollKey={`groupBlockedMembers:${groupId}`} emptyMessageText={emptyMessage}>
        {accountIds.map((accountId) => (
          <BlockedMember key={accountId} accountId={accountId} groupId={groupId} />
        ))}
      </ScrollableList>
    </Column>
  );
};

export { GroupBlockedMembers as default };
