import { useMemo } from 'react';

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

import { enableEmojiReaction } from '@/mastodon/initial_state';
import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
import { openModal } from 'mastodon/actions/modal';
import { Dropdown } from 'mastodon/components/dropdown_menu';
import { Icon } from 'mastodon/components/icon';
import { useIdentity } from 'mastodon/identity_context';
import type { MenuItem } from 'mastodon/models/dropdown_menu';
import { canManageReports, canViewAdminDashboard } from 'mastodon/permissions';
import { useAppDispatch } from 'mastodon/store';

const messages = defineMessages({
  followedTags: {
    id: 'navigation_bar.followed_tags',
    defaultMessage: 'Followed hashtags',
  },
  blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
  domainBlocks: {
    id: 'navigation_bar.domain_blocks',
    defaultMessage: 'Blocked domains',
  },
  mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
  filters: { id: 'navigation_bar.filters', defaultMessage: 'Muted words' },
  administration: {
    id: 'navigation_bar.administration',
    defaultMessage: 'Administration',
  },
  moderation: { id: 'navigation_bar.moderation', defaultMessage: 'Moderation' },
  logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
  automatedDeletion: {
    id: 'navigation_bar.automated_deletion',
    defaultMessage: 'Automated post deletion',
  },
  accountSettings: {
    id: 'navigation_bar.account_settings',
    defaultMessage: 'Password and security',
  },
  importExport: {
    id: 'navigation_bar.import_export',
    defaultMessage: 'Import and export',
  },
  privacyAndReach: {
    id: 'navigation_bar.privacy_and_reach',
    defaultMessage: 'Privacy and reach',
  },
  reaction_deck: {
    id: 'navigation_bar.reaction_deck',
    defaultMessage: 'Reaction deck',
  },
  emoji_reactions: {
    id: 'navigation_bar.emoji_reactions',
    defaultMessage: 'Emoji reactions',
  },
});

export const MoreLink: React.FC = () => {
  const intl = useIntl();
  const { permissions } = useIdentity();
  const dispatch = useAppDispatch();

  const emojiReactionMenu = useMemo(() => {
    if (!enableEmojiReaction) return [];
    return [
      {
        text: intl.formatMessage(messages.emoji_reactions),
        to: '/emoji_reactions',
      },
    ];
  }, [intl]);

  const menu = useMemo(() => {
    const arr: MenuItem[] = [
      {
        text: intl.formatMessage(messages.followedTags),
        to: '/followed_tags',
      },
      ...emojiReactionMenu,
      {
        text: intl.formatMessage(messages.reaction_deck),
        to: '/reaction_deck',
      },
      null,
      { text: intl.formatMessage(messages.filters), href: '/filters' },
      { text: intl.formatMessage(messages.mutes), to: '/mutes' },
      { text: intl.formatMessage(messages.blocks), to: '/blocks' },
      {
        text: intl.formatMessage(messages.domainBlocks),
        to: '/domain_blocks',
      },
    ];

    arr.push(
      null,
      {
        href: '/settings/privacy',
        text: intl.formatMessage(messages.privacyAndReach),
      },
      {
        href: '/statuses_cleanup',
        text: intl.formatMessage(messages.automatedDeletion),
      },
      {
        href: '/auth/edit',
        text: intl.formatMessage(messages.accountSettings),
      },
      {
        href: '/settings/export',
        text: intl.formatMessage(messages.importExport),
      },
    );

    if (canManageReports(permissions)) {
      arr.push(null, {
        href: '/admin/reports',
        text: intl.formatMessage(messages.moderation),
      });
    }

    if (canViewAdminDashboard(permissions)) {
      arr.push({
        href: '/admin/dashboard',
        text: intl.formatMessage(messages.administration),
      });
    }

    const handleLogoutClick = () => {
      dispatch(openModal({ modalType: 'CONFIRM_LOG_OUT', modalProps: {} }));
    };

    arr.push(null, {
      text: intl.formatMessage(messages.logout),
      action: handleLogoutClick,
    });

    return arr;
  }, [intl, dispatch, permissions, emojiReactionMenu]);

  return (
    <Dropdown items={menu}>
      <button className='column-link column-link--transparent'>
        <Icon id='' icon={MoreHorizIcon} className='column-link__icon' />

        <FormattedMessage id='navigation_bar.more' defaultMessage='More' />
      </button>
    </Dropdown>
  );
};