import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import classNames from 'clsx';

import { CANCEL_UPLOAD_LOGIN_AS } from '@/modules/uploaderNew/constants';

import { getImpersonated } from '@/modules/@common/token/helpers';
import { cancelImpersonationAction } from '@/modules/@common/token/redux/slices';
import { getUserFirstNameSelector } from '@/modules/@common/user/redux/selectors';
import { monitoringStateSelector } from '@/modules/editorial/bulkActions/redux/selectors';
import { queueSelector } from '@/modules/uploaderNew/redux/selectors';

import ViewportDraggable from '@/modules/@common/ViewportDraggable/ViewportDraggable';
import BulkActionsStatusDialog from '@/modules/editorial/bulkActions/components/BulkActionStatusDialog/BulkActionStatusDialog';
import MultiUploadStatusDialog from '@/modules/uploaderNew/components/MultiUploadStatusDialog';
import useShowCancelUploadDialog from '@/modules/uploaderNew/components/useShowCancelUploadDialog';
import ThemeConfig from '@/mui/theme';
import { Button, Paper, Stack, Typography } from '@/mui/components';

import styles from './FloatBlock.module.scss';

const UPLOAD_PROGRESS_TYPE = 'upload-progress';
const BULK_PROGRESS_TYPE = 'bulk-progress';

const Components = {
  [UPLOAD_PROGRESS_TYPE]: MultiUploadStatusDialog,
  [BULK_PROGRESS_TYPE]: BulkActionsStatusDialog,
};

function FloatBlock() {
  const dispatch = useDispatch();

  const queue = useSelector(queueSelector);
  const bulkActionsMonitoringState = useSelector(monitoringStateSelector);
  const userFirstName = useSelector(getUserFirstNameSelector);

  const { hasInProgress, handleOpenConfirmDialog } = useShowCancelUploadDialog();

  const showQueue = !!Object.keys(queue).length || !!bulkActionsMonitoringState.length;
  const showImpersonate = getImpersonated();

  return (
    (showQueue || showImpersonate) && (
      <ThemeConfig>
        {showQueue && (
          <ViewportDraggable className={styles.Wrapper}>
            {[UPLOAD_PROGRESS_TYPE, BULK_PROGRESS_TYPE].map((slotType) => {
              const Component = Components[slotType];
              let headerWithoutRadius;

              if (slotType === BULK_PROGRESS_TYPE) {
                headerWithoutRadius = true;
              }

              return <Component headerWithoutRadius={headerWithoutRadius} key={slotType} />;
            })}
          </ViewportDraggable>
        )}
        {showImpersonate && (
          <ViewportDraggable className={classNames(styles.Wrapper, styles.Wrapper___impersonate)}>
            <Paper
              elevation={3}
              className={styles.ImpersonateContainer}
              style={{
                // fix for old PCN pages
                // eslint-disable-next-line local-rules/no-inline-styles
                backgroundColor: 'var(--theme-palette-background-paper) !important',
              }}
            >
              <Stack spacing={0}>
                <Typography variant="body2" color="text.primary">
                  You are currently logged in as
                </Typography>
                <Typography variant="body2" color="text.primary">
                  {userFirstName}
                </Typography>
              </Stack>
              <Button
                variant="outlined"
                color="primary"
                style={{
                  // fix for old PCN pages
                  // eslint-disable-next-line local-rules/no-inline-styles
                  color: 'var(--theme-palette-primary-main) !important',
                  // eslint-disable-next-line local-rules/no-inline-styles
                  fontSize: 'var(--theme-typography-body2-font-size) !important',
                }}
                onClick={() => {
                  if (hasInProgress) {
                    handleOpenConfirmDialog(CANCEL_UPLOAD_LOGIN_AS);
                  } else {
                    dispatch(cancelImpersonationAction());
                  }
                }}
              >
                Switch back
              </Button>
            </Paper>
          </ViewportDraggable>
        )}
      </ThemeConfig>
    )
  );
}

export default FloatBlock;
