import React, { useCallback } from 'react';
import { TagsBulkAssignPopoverState } from '../../../state/TagsBulkAssignPopoverState';
import { Box, Button, Divider, TextButton } from '@wix/design-system';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { observer } from 'mobx-react-lite';
import { FiltersMap } from '@wix/bex-core';

interface FooterProps<T, F extends FiltersMap> {
  state: TagsBulkAssignPopoverState<T, F>;
}

const _Footer = <T, F extends FiltersMap>({ state }: FooterProps<T, F>) => {
  const { translate: t } = useWixPatternsContainer();

  const closePopover = useCallback(() => {
    state.closePopover();
  }, [state]);

  const applyChanges = useCallback(() => {
    state.applyChanges();
  }, [state]);

  const handleManageTagsCtaClick = useCallback(() => {
    state.handleManageTagsCtaClick();
  }, [state]);

  return (
    <Box height="54px" width="100%" direction="vertical">
      <Divider />
      <Box
        height="100%"
        align="space-between"
        verticalAlign="middle"
        padding="0 SP3"
      >
        {!state.isLoading && !state.isError && (
          <TextButton
            dataHook="bulk-assign-tags-manage-tags-button"
            size="small"
            onClick={handleManageTagsCtaClick}
          >
            {t('cairo.tags.collectionPage.popover.manage.CTA')}
          </TextButton>
        )}
        <Box marginLeft="auto">
          {state.isDirty ? (
            <Button
              onClick={applyChanges}
              dataHook="bulk-assign-tags-apply-button"
            >
              {t('cairo.tags.collectionPage.applyChanges.CTA')}
            </Button>
          ) : (
            <Button
              onClick={closePopover}
              dataHook="bulk-assign-tags-close-button"
            >
              {t('cairo.tags.collectionPage.popover.close.CTA')}
            </Button>
          )}
        </Box>
      </Box>
    </Box>
  );
};

export const Footer = observer(_Footer);
