import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'clsx';

import {
  WIDGET_DISPLAY_STATE_DATA,
  WIDGET_DISPLAY_STATE_ERROR,
  WIDGET_DISPLAY_STATE_NO_DATA,
} from '@/modules/analytics/common/constants';

import Stub from '@/modules/analytics/common/components/Stub';
import { Grid } from '@/mui/components';

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

function RoundItemContainer({
  className = '',
  displayState = WIDGET_DISPLAY_STATE_DATA,
  type = 'vertical',
  size = 'medium',
  ...props
}) {
  const getDisplayItem = {
    [WIDGET_DISPLAY_STATE_DATA]: props.children,
    [WIDGET_DISPLAY_STATE_NO_DATA]: (
      <Stub
        imageType={WIDGET_DISPLAY_STATE_NO_DATA}
        type={type}
        size={size}
        firstTitle="No Data..."
        firstSubTitle={
          size === 'large'
            ? 'No Data matching selected filters. Try adjusting your filters.'
            : 'No Data matching selected filters.'
        }
        secondSubTitle={size === 'large' ? null : 'Try adjusting your filters.'}
      />
    ),
    [WIDGET_DISPLAY_STATE_ERROR]: (
      <Stub
        imageType={WIDGET_DISPLAY_STATE_ERROR}
        type={type}
        size={size}
        firstTitle={size === 'medium' || size === 'large' ? 'Error has occured...' : 'Error'}
        secondTitle={size === 'medium' || size === 'large' ? null : 'has occured...'}
        firstSubTitle={size === 'large' ? 'Something went wrong. Try adjusting your filters.' : 'Something went wrong.'}
        secondSubTitle={size === 'large' ? null : 'Try adjusting your filters.'}
      />
    ),
  };

  const shouldResetPadding = [WIDGET_DISPLAY_STATE_NO_DATA, WIDGET_DISPLAY_STATE_ERROR].includes(displayState);

  return (
    <Grid
      {...props}
      className={classNames(styles.Wrapper, className, {
        [styles.ResetPadding]: shouldResetPadding,
      })}
    >
      {getDisplayItem[displayState]}
    </Grid>
  );
}

RoundItemContainer.propTypes = {
  children: PropTypes.node.isRequired,
  className: PropTypes.string,
  displayState: PropTypes.oneOf([WIDGET_DISPLAY_STATE_DATA, WIDGET_DISPLAY_STATE_NO_DATA, WIDGET_DISPLAY_STATE_ERROR]),
  type: PropTypes.oneOf(['horizontal', 'vertical']),
  size: PropTypes.oneOf(['small', 'medium', 'large']),
};

export default RoundItemContainer;
