import { IconTrash, IconUsers } from '@material-hu/icons/tabler';
import Collapse from '@material-hu/mui/Collapse';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';
import { useDialogLayer } from '@material-hu/components/layers/Dialogs';
import { useDrawerLayer } from '@material-hu/components/layers/Drawers';

import { useLokaliseTranslation } from 'src/utils/i18n';

import DeleteConfirmDialog from '../DeleteConfirmDialog';
import EditAudienceDrawer from '../EditAudienceDrawer';

const DELETE_DIALOG_ID = 'knowledge-base-delete-dialog';

type KnowledgeBaseBulkActionsBarProps = {
  selectedItemsPath: Set<string>;
  clearSelection: () => void;
};

const KnowledgeBaseBulkActionsBar = ({
  selectedItemsPath,
  clearSelection,
}: KnowledgeBaseBulkActionsBarProps) => {
  const { t } = useLokaliseTranslation(['agents', 'documents']);
  const { openDrawer } = useDrawerLayer();
  const { openDialog, closeDialog } = useDialogLayer();

  const isVisible = selectedItemsPath.size > 0;

  const handleEditAudience = () => {
    openDrawer({
      content: (
        <EditAudienceDrawer
          items={[...selectedItemsPath]}
          onSuccess={clearSelection}
        />
      ),
    });
  };

  const handleDelete = () => {
    openDialog(
      {
        content: (
          <DeleteConfirmDialog
            variant="bulk"
            count={selectedItemsPath.size}
            filenames={[...selectedItemsPath]}
            onClose={() => closeDialog(DELETE_DIALOG_ID)}
            onSuccessDeletion={clearSelection}
          />
        ),
      },
      DELETE_DIALOG_ID,
    );
  };

  return (
    <Collapse
      in={isVisible}
      sx={{ mt: 2 }}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 1,
          p: 2,
          borderTopLeftRadius: 16,
          borderTopRightRadius: 16,
          backgroundColor: theme =>
            theme.palette.new.background.elements.default,
          border: theme =>
            `1px solid ${theme.palette.new.border.neutral.default}`,
          borderBottom: 'none',
        }}
      >
        <Typography
          variant="globalS"
          sx={{
            color: theme => theme.palette.new.text.neutral.lighter,
            mr: 'auto',
            opacity: isVisible ? 1 : 0,
          }}
        >
          {t('documents:selected_documents', {
            count: selectedItemsPath.size,
          })}
        </Typography>

        <Button
          variant="outlined"
          size="small"
          startIcon={<IconUsers />}
          onClick={handleEditAudience}
        >
          {t('knowledge_base.bulk_actions.edit_audience')}
        </Button>

        <Button
          variant="outlined"
          size="small"
          color="error"
          startIcon={<IconTrash />}
          onClick={handleDelete}
        >
          {t('general:delete')}
        </Button>
      </Stack>
    </Collapse>
  );
};

export default KnowledgeBaseBulkActionsBar;