import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'clsx';
import Image from 'next/image';

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

import { Grid } from '@/mui/components';

import imgError from './img/imgError.png';
import imgNoData from './img/imgNoData.png';

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

function Stub({ secondTitle = null, secondSubTitle = null, ...props }) {
  const getDisplayImg = {
    [WIDGET_DISPLAY_STATE_NO_DATA]: imgNoData,
    [WIDGET_DISPLAY_STATE_ERROR]: imgError,
  };

  return (
    <Grid
      container
      className={classNames(styles.Wrapper, {
        [styles.Wrapper_vertical]: props.type === 'vertical',
        [styles.Wrapper_horizontal]: props.type === 'horizontal',
      })}
    >
      <Grid
        item
        className={classNames(styles.ImageWrapper, {
          [styles.ImageWrapper_small]: props.size === 'small',
          [styles.ImageWrapper_medium]: props.size === 'medium',
          [styles.ImageWrapper_large]: props.size === 'large',
        })}
      >
        <Image
          src={getDisplayImg[props.imageType]}
          alt="stub"
          className={styles.Image}
          width={500}
          height={500}
          unoptimized
          loading="eager"
        />
      </Grid>

      <Grid
        item
        className={classNames(styles.TextWrapper, {
          [styles.TextWrapper_vertical]: props.type === 'vertical',
          [styles.TextWrapper_horizontal]: props.type === 'horizontal',
        })}
      >
        <Grid
          item
          className={classNames(styles.Title, {
            [styles.Title_vertical]: props.type === 'vertical',
            [styles.Title_horizontal]: props.type === 'horizontal',
            [styles.Title_small]: props.size === 'small',
            [styles.Title_medium]: props.size === 'medium',
            [styles.Title_large]: props.size === 'large',
          })}
        >
          {props.firstTitle}
        </Grid>

        {secondTitle && (
          <Grid
            item
            className={classNames(styles.Title, {
              [styles.Title_vertical]: props.type === 'vertical',
              [styles.Title_horizontal]: props.type === 'horizontal',
              [styles.Title_small]: props.size === 'small',
              [styles.Title_medium]: props.size === 'medium',
              [styles.Title_large]: props.size === 'large',
            })}
          >
            {secondTitle}
          </Grid>
        )}

        {props.firstSubTitle && (
          <Grid
            item
            className={classNames(styles.Subtitle, {
              [styles.Subtitle_vertical]: props.type === 'vertical',
              [styles.Subtitle_horizontal]: props.type === 'horizontal',
              [styles.Subtitle_small]: props.size === 'small',
              [styles.Subtitle_medium]: props.size === 'medium',
              [styles.Subtitle_large]: props.size === 'large',
            })}
          >
            {props.firstSubTitle}
          </Grid>
        )}

        {secondSubTitle && (
          <Grid
            item
            className={classNames(styles.Subtitle, {
              [styles.Subtitle_vertical]: props.type === 'vertical',
              [styles.Subtitle_horizontal]: props.type === 'horizontal',
              [styles.Subtitle_small]: props.size === 'small',
              [styles.Subtitle_medium]: props.size === 'medium',
              [styles.Subtitle_large]: props.size === 'large',
            })}
          >
            {secondSubTitle}
          </Grid>
        )}
      </Grid>
    </Grid>
  );
}

Stub.propTypes = {
  type: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
  size: PropTypes.oneOf(['small', 'medium', 'large']).isRequired,
  imageType: PropTypes.oneOf([WIDGET_DISPLAY_STATE_DATA, WIDGET_DISPLAY_STATE_NO_DATA, WIDGET_DISPLAY_STATE_ERROR])
    .isRequired,
  firstTitle: PropTypes.string.isRequired,
  secondTitle: PropTypes.string,
  firstSubTitle: PropTypes.string.isRequired,
  secondSubTitle: PropTypes.string,
};

export default Stub;
