import { TextButton, PopoverMenu } from '@wix/design-system';
import React from 'react';
import { observer } from 'mobx-react-lite';
import {
  ChevronDown,
  Confirm,
  Duplicate,
  Edit,
  Delete,
  Flag,
  FlagDismiss,
} from '@wix/wix-ui-icons-common';
import { FiltersMap } from '@wix/bex-core';
import { CollectionViewsState } from '../../state';
import { useWixPatternsContainer } from '@wix/bex-core/react';

export interface ManageViewPopoverProps<T, F extends FiltersMap> {
  state: CollectionViewsState<T, F>;
  origin: string;
}

function _ManageViewPopover<T, F extends FiltersMap>(
  props: ManageViewPopoverProps<T, F>,
) {
  const container = useWixPatternsContainer();
  const { state } = props;
  const { views, table, emitter, isViewChanged } = state;

  const { translate: t } = container;

  return (
    <PopoverMenu
      minWidth={271}
      onShow={() => {
        emitter.emit('openManageViewPopoverMenu');
      }}
      dataHook="manage-view-popover"
      triggerElement={
        <TextButton
          size="small"
          as="button"
          dataHook="manage-view-popover-button"
          suffixIcon={<ChevronDown />}
        >
          {t('cairo.manageView.CTA')}
        </TextButton>
      }
    >
      <PopoverMenu.MenuItem
        text={t('cairo.manageView.saveChanges.CTA')}
        dataHook="save-changes-to-view"
        disabled={
          !views.isCurrentViewSelected ||
          !isViewChanged ||
          views.currentView?.isPreset
        }
        // subtitle={
        //   views.currentView?.isPreset
        //     ? t('cairo.manageView.saveChanges.disabled.predefinedView.tooltip')
        //     : !isViewChanged
        //     ? t('cairo.manageView.saveChanges.disabled.tooltip')
        //     : undefined
        // }
        prefixIcon={<Confirm />}
        onClick={() => {
          state.saveViewChanges();
        }}
      />
      <PopoverMenu.MenuItem
        dataHook="save-new-view"
        disabled={views.reachedViewsLimit}
        onClick={() => {
          views.saveViewModal.open();
          table.closeSidePanel();
        }}
        text={t('cairo.manageView.saveNewView.CTA')}
        prefixIcon={<Duplicate />}
      />
      <PopoverMenu.MenuItem
        dataHook="rename-view"
        disabled={views.currentView?.isPreset || isViewChanged}
        // subtitle={
        //   views.currentView?.isPreset
        //     ? t('cairo.manageView.Rename.disabled.predefinedView.tooltip')
        //     : isViewChanged
        //     ? t('cairo.manageView.Rename.disabled.tooltip')
        //     : undefined
        // }
        onClick={() => {
          views.renameViewModal.open();
          table.closeSidePanel();
        }}
        text={t('cairo.manageView.Rename.CTA')}
        prefixIcon={<Edit />}
      />
      <PopoverMenu.MenuItem
        dataHook="set-as-default-view"
        disabled={!views.currentView || (isViewChanged && !views.isDefaultView)}
        // subtitle={
        //   isViewChanged && !views.isDefaultView
        //     ? t('cairo.manageView.setAsDefault.tooltip')
        //     : undefined
        // }
        onClick={() => {
          state.setAsDefaultView();
        }}
        text={
          views.isDefaultView
            ? t('cairo.manageView.setAsDefault.reset.CTA')
            : t('cairo.manageView.setAsDefault.CTA')
        }
        prefixIcon={views.isDefaultView ? <FlagDismiss /> : <Flag />}
      />
      <PopoverMenu.MenuItem
        dataHook="delete-view"
        disabled={!views.isCurrentViewSelected || views.currentView?.isPreset}
        // subtitle={
        //   views.isCurrentViewSelected && views.currentView?.isPreset
        //     ? t('cairo.manageView.Delete.disabled.predefinedView.tooltip')
        //     : undefined
        // }
        onClick={() => {
          state.deleteView();
        }}
        text={t('cairo.manageView.Delete.CTA')}
        prefixIcon={<Delete />}
      />
    </PopoverMenu>
  );
}

export const ManageViewPopover = observer(_ManageViewPopover);
