import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import CircularProgress from '@mui/material/CircularProgress';
import Divider from '@mui/material/Divider';
import Tooltip from '@mui/material/Tooltip';

import { ListingVariant, userAtom } from '@centreon/ui-context';

import { useAtomValue } from 'jotai';
import { equals, isEmpty, isNil, not, pick } from 'ramda';
import {
  type ChangeEvent,
  type MouseEvent,
  type ReactNode,
  useCallback
} from 'react';
import { useTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';

import { IconButton, type ListingProps } from '../..';
import { useMemoComponent } from '../../utils';
import {
  labelApproximateCount,
  labelApproximateCountTooltip,
  labelComputingExactCount,
  labelOf,
  labelRowsPerPage
} from '../translatedLabels';
import ColumnMultiSelect from './ColumnMultiSelect';
import StyledPagination from './Pagination';
import PaginationActions from './PaginationActions';

interface StyleProps {
  marginWidthTableListing: number;
  width: number;
}

const useStyles = makeStyles<StyleProps>()(
  (theme, { width, marginWidthTableListing }) => ({
    actions: {
      flex: 1,
      padding: theme.spacing(1, 1, 1, 0)
    },
    container: {
      alignItems: 'center',
      display: 'flex',
      flexWrap: 'wrap',
      justifyContent: 'space-between',
      width: '100%'
    },
    iconMode: {
      '& .MuiSvgIcon-root': {
        height: theme.spacing(1.5)
      },
      display: 'flex',
      flexDirection: 'column'
    },
    ModeViewer: {
      paddingLeft: theme.spacing(1)
    },
    mode: {
      flexDirection: 'column-reverse'
    },
    moving: {
      marginRight: theme.spacing((width - marginWidthTableListing) / 8)
    },
    pagination: {
      '& .MuiToolbar-root': {
        paddingLeft: 0
      },
      padding: 0
    },
    selectMenu: {
      '& .MuiMenuItem-root': {
        lineHeight: 1
      }
    },
    subContainer: {
      alignItems: 'center',
      display: 'flex'
    }
  })
);

type Props = Pick<
  ListingProps<unknown>,
  | 'actions'
  | 'onLimitChange'
  | 'onPaginate'
  | 'paginated'
  | 'currentPage'
  | 'limit'
  | 'totalRows'
  | 'columns'
  | 'columnConfiguration'
  | 'onSelectColumns'
  | 'onResetColumns'
  | 'actionsBarMemoProps'
  | 'moveTablePagination'
  | 'widthToMoveTablePagination'
  | 'customPaginationClassName'
  | 'listingVariant'
  | 'viewerModeConfiguration'
  | 'approximateTotalRows'
  | 'onApproximateCountClick'
  | 'isApproximateCountLoading'
>;

const MemoListingActionBar = ({
  actions,
  paginated,
  totalRows,
  currentPage,
  limit,
  columns,
  columnConfiguration,
  customPaginationClassName,
  onResetColumns,
  onSelectColumns,
  onPaginate,
  onLimitChange,
  moveTablePagination = false,
  widthToMoveTablePagination = 550,
  actionsBarMemoProps = [],
  viewerModeConfiguration,
  listingVariant,
  approximateTotalRows = false,
  onApproximateCountClick,
  isApproximateCountLoading = false
}: Props): JSX.Element => {
  const marginWidthTableListing = 30;
  const { classes, cx } = useStyles({
    marginWidthTableListing,
    width: widthToMoveTablePagination
  });
  const { t } = useTranslation();

  const { themeMode } = useAtomValue(userAtom);

  const changeRowPerPage = (
    event: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
  ): void => {
    onLimitChange?.(event.target.value);
    onPaginate?.(0);
  };

  const changePage = (
    _: MouseEvent<HTMLButtonElement> | null,
    value: number
  ): void => {
    onPaginate?.(value);
  };

  const labelDisplayedRows = useCallback(
    ({
      from,
      to,
      count
    }: {
      count: number;
      from: number;
      to: number;
    }): ReactNode => {
      const range = `${from}-${to} ${t(labelOf)} `;

      if (!approximateTotalRows) {
        return `${range}${count}`;
      }

      if (isApproximateCountLoading) {
        return (
          <span
            style={{ alignItems: 'center', display: 'inline-flex', gap: 4 }}
          >
            {range}
            <CircularProgress size={10} />
            <span>{t(labelComputingExactCount)}</span>
          </span>
        );
      }

      const approximateLabel = (
        <button
          onClick={onApproximateCountClick}
          style={{
            background: 'none',
            border: 'none',
            color: 'inherit',
            cursor: onApproximateCountClick ? 'pointer' : 'default',
            font: 'inherit',
            fontWeight: 600,
            padding: 0,
            textDecoration: onApproximateCountClick
              ? 'underline dotted'
              : 'none'
          }}
          type="button"
        >
          {t(labelApproximateCount)}
        </button>
      );

      return (
        <span>
          {range}
          {onApproximateCountClick ? (
            <Tooltip title={t(labelApproximateCountTooltip)}>
              {approximateLabel}
            </Tooltip>
          ) : (
            approximateLabel
          )}
        </span>
      );
    },
    [
      approximateTotalRows,
      isApproximateCountLoading,
      onApproximateCountClick,
      t
    ]
  );

  return useMemoComponent({
    Component: (
      <div className={classes.container}>
        <div className={classes.actions}>
          <div>{actions}</div>
        </div>
        <div className={classes.subContainer}>
          {!isEmpty(viewerModeConfiguration) &&
            !isNil(viewerModeConfiguration) && (
              <IconButton
                ariaLabel={
                  t(viewerModeConfiguration?.labelViewerMode ?? '') as string
                }
                className={
                  viewerModeConfiguration?.customStyle
                    ?.customStyleViewerModeContainer
                }
                data-testid={viewerModeConfiguration?.testId}
                disabled={viewerModeConfiguration?.disabled}
                onClick={viewerModeConfiguration?.onClick}
                size="large"
                title={viewerModeConfiguration?.title}
              >
                <div
                  className={cx(
                    classes.iconMode,
                    viewerModeConfiguration?.customStyle
                      ?.customStyleViewerModeIcon,
                    {
                      [classes.mode]: equals(
                        listingVariant,
                        ListingVariant.extended
                      )
                    }
                  )}
                >
                  <ArrowUpwardIcon fontSize="small" />
                  <Divider />
                  <ArrowDownwardIcon fontSize="small" />
                </div>
              </IconButton>
            )}
          <div className={classes.ModeViewer} />
          {columnConfiguration?.selectedColumnIds &&
            columnConfiguration?.sortable && (
              <ColumnMultiSelect
                columnConfiguration={columnConfiguration}
                columns={columns}
                onResetColumns={onResetColumns}
                onSelectColumns={onSelectColumns}
              />
            )}
          {paginated && (
            <StyledPagination
              ActionsComponent={PaginationActions}
              className={cx(classes.pagination, customPaginationClassName, {
                [classes.moving]: moveTablePagination
              })}
              colSpan={3}
              count={totalRows ?? 0}
              labelDisplayedRows={labelDisplayedRows}
              labelRowsPerPage={null}
              onPageChange={changePage}
              onRowsPerPageChange={changeRowPerPage}
              page={currentPage ?? 0}
              rowsPerPage={limit ?? 10}
              rowsPerPageOptions={[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]}
              SelectProps={{
                id: labelRowsPerPage,
                MenuProps: {
                  className: classes.selectMenu
                }
              }}
            />
          )}
        </div>
      </div>
    ),
    memoProps: [
      paginated,
      totalRows,
      currentPage,
      moveTablePagination,
      widthToMoveTablePagination,
      listingVariant,
      themeMode,
      limit,
      columns.map(
        pick(['id', 'label', 'disabled', 'width', 'shortLabel', 'sortField'])
      ),
      columnConfiguration,
      customPaginationClassName,
      approximateTotalRows,
      isApproximateCountLoading,
      ...actionsBarMemoProps
    ]
  });
};

const ListingActionBar = ({
  actions,
  onPaginate,
  onLimitChange,
  paginated,
  totalRows,
  currentPage,
  limit,
  columns,
  columnConfiguration,
  onResetColumns,
  onSelectColumns,
  actionsBarMemoProps,
  moveTablePagination,
  widthToMoveTablePagination,
  customPaginationClassName,
  listingVariant,
  viewerModeConfiguration,
  approximateTotalRows,
  onApproximateCountClick,
  isApproximateCountLoading
}: Props): JSX.Element | null => {
  if (
    not(paginated) &&
    isNil(actions) &&
    isNil(columnConfiguration?.selectedColumnIds)
  ) {
    return null;
  }

  return (
    <MemoListingActionBar
      actions={actions}
      actionsBarMemoProps={actionsBarMemoProps}
      approximateTotalRows={approximateTotalRows}
      columnConfiguration={columnConfiguration}
      columns={columns}
      currentPage={currentPage}
      customPaginationClassName={customPaginationClassName}
      isApproximateCountLoading={isApproximateCountLoading}
      limit={limit}
      listingVariant={listingVariant}
      moveTablePagination={moveTablePagination}
      onApproximateCountClick={onApproximateCountClick}
      onLimitChange={onLimitChange}
      onPaginate={onPaginate}
      onResetColumns={onResetColumns}
      onSelectColumns={onSelectColumns}
      paginated={paginated}
      totalRows={totalRows}
      viewerModeConfiguration={viewerModeConfiguration}
      widthToMoveTablePagination={widthToMoveTablePagination}
    />
  );
};

export default ListingActionBar;