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

import ScrollableList from '@/components/scrollable-list';
import Column from '@/components/ui/column';
import Stack from '@/components/ui/stack';
import AccountContainer from '@/containers/account-container';
import { useMutes } from '@/queries/account-lists/use-blocks';

const messages = defineMessages({
  heading: { id: 'column.mutes', defaultMessage: 'Mutes' },
});

const MutesPage: React.FC = () => {
  const intl = useIntl();

  const { data = [], hasNextPage, fetchNextPage, isFetching } = useMutes();

  return (
    <Column label={intl.formatMessage(messages.heading)}>
      <Stack space={4}>
        <ScrollableList
          itemClassName={clsx('pb-4', { 'last:pb-0': !hasNextPage })}
          scrollKey='mutes'
          isLoading={isFetching}
          onLoadMore={fetchNextPage}
          hasMore={hasNextPage}
          emptyMessageText={
            <FormattedMessage
              id='empty_column.mutes'
              defaultMessage="You haven't muted any users yet."
            />
          }
        >
          {data.map(([accountId, muteExpiresAt]) => (
            <AccountContainer
              key={accountId}
              id={accountId}
              actionType='muting'
              muteExpiresAt={muteExpiresAt}
            />
          ))}
        </ScrollableList>
      </Stack>
    </Column>
  );
};

export { MutesPage as default };
