import React from 'react';
import { Box, Button } from '@wix/design-system';
import { TagSmall } from '@wix/wix-ui-icons-common';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { useWixPatternsContainer } from '../..';
import { BulkAssignTagsPopover } from '../Tags/BulkAssignTagsPopover';
import { DisabledTooltip } from '../DisabledTooltip';
import { observer } from 'mobx-react-lite';

const _TagsAssignButton = () => {
  const toolbarCollectionState = useToolbarCollectionContext();
  const { translate: t } = useWixPatternsContainer();

  const { tagsBulkAssignPopoverState } =
    toolbarCollectionState.tagsCollectionState ?? {};

  if (!tagsBulkAssignPopoverState) {
    return null;
  }

  const { tagsBulkAssignButtonState } = tagsBulkAssignPopoverState;

  return (
    <BulkAssignTagsPopover
      state={tagsBulkAssignPopoverState}
      popoverElement={
        <Box>
          <DisabledTooltip
            content={tagsBulkAssignButtonState.tooltipContent}
            disabled={!tagsBulkAssignButtonState.isDisabled}
            dataHook="tags-assign-button-disabled-tooltip"
          >
            <Button
              skin="standard"
              priority="secondary"
              size="small"
              ellipsis
              prefixIcon={<TagSmall />}
              dataHook="tags-assign-button"
              onClick={() => {
                tagsBulkAssignPopoverState.showPopover();
              }}
              disabled={tagsBulkAssignButtonState.isDisabled}
            >
              {t('cairo.tags.collectionPage.add.CTA')}
            </Button>
          </DisabledTooltip>
        </Box>
      }
    />
  );
};

export const TagsAssignButton = observer(_TagsAssignButton);
