import { ContextMenu } from '@vizality/components';
import { toPlural } from '@vizality/util/string';
import { contextMenu } from '@vizality/webpack';
import { useForceUpdate } from '@vizality/hooks';
import React, { memo } from 'react';
import { Messages } from '@vizality/i18n';

const { closeContextMenu } = contextMenu;

/**
 * Context menu with items corresponding to an addon.
 * @component
 * @param {object} props
 * @param {Addon#addonId} props.addonId Addon ID
 * @param {AddonType} props.type Addon type
 * @returns {React.MemoExoticComponent<function(): React.ReactElement>}
 */
export default memo(({ addonId, type }) => {
  const forceUpdate = useForceUpdate();
  const isEnabled = vizality.manager[toPlural(type)].isEnabled(addonId);
  const isInstalled = vizality.manager[toPlural(type)].isInstalled(addonId);
  const hasSettings = vizality.manager[toPlural(type)].hasSettings(addonId);
  const hasScreenshots = vizality.manager[toPlural(type)].hasScreenshots(addonId);
  const hasChangelog = vizality.manager[toPlural(type)].hasChangelog(addonId);

  return (
    <ContextMenu.Menu navId='vz-addon-context-menu' onClose={closeContextMenu}>
      <ContextMenu.Item
        id='overview'
        label='Overview'
        action={() => vizality.api.routes.navigateTo(`${type}/${addonId}`)}
      />
      <ContextMenu.Item
        id='screenshots'
        label='Screenshots'
        action={() => vizality.api.routes.navigateTo(`${type}/${addonId}/screenshots`)}
        disabled={hasScreenshots}
      />
      <ContextMenu.Item
        id='settings'
        label='Settings'
        action={() => vizality.api.routes.navigateTo(`${type}/${addonId}/settings`)}
        disabled={isInstalled && hasSettings}
      />
      <ContextMenu.Item
        id='reviews'
        label='Reviews'
        action={() => vizality.api.routes.navigateTo(`${type}/${addonId}/reviews`)}
        disabled
      />
      <ContextMenu.Item
        id='changelog'
        label='Changelog'
        action={() => vizality.api.routes.navigateTo(`${type}/${addonId}/changelog`)}
        disabled={hasChangelog}
      />
      <ContextMenu.Separator />
      {isInstalled && (
        <ContextMenu.CheckboxItem
          id='enable'
          label='Enable'
          checked={isEnabled}
          action={async () => {
            vizality.manager[toPlural(type)].toggle(addonId);
            forceUpdate();
          }}
        />
      )}
      {isInstalled
        ? (
          <ContextMenu.Item
            id='uninstall'
            label='Uninstall'
            color={ContextMenu.Item.Colors.DANGER}
            action={async () => vizality.manager[toPlural(type)].uninstall(addonId)}
          />
        )
        : (
          <ContextMenu.Item
            id='install'
            label='Install'
            color={ContextMenu.Item.Colors.GREEN}
            action={async () => vizality.manager[toPlural(type)].install(addonId)}
          />
        )
      }
      <ContextMenu.Separator />
      <ContextMenu.Item
        id='copy-link'
        label='Copy Link'
        action={() => DiscordNative.clipboard.copy(`<vizality://${toPlural(type)}/${addonId}>`)}
      />
      <ContextMenu.Item
        id='copy-id'
        label='Copy ID'
        action={() => DiscordNative.clipboard.copy(addonId)}
      />
    </ContextMenu.Menu>
  );
});
