import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'clsx';
import { CheckRounded, InfoOutlined, WarningAmberRounded } from '@mui/icons-material';

import { Box, Stack, Tooltip, Typography } from '@/mui/components';
import { CustomSpinner } from '@/mui/components/CustomIcon';

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

const STATUS_FAILED = 'FAILED';
const STATUS_PROCESSING = 'PROCESSING';

function StatusBlockComponent({ playbackImmediately = false, ...props }) {
  let tooltipText = '';

  if (props.status === STATUS_FAILED) {
    tooltipText = 'Not available, failed video processing';
  } else if (props.status === STATUS_PROCESSING) {
    tooltipText = playbackImmediately
      ? 'Video is available for playback; video analysis is still in progress'
      : 'Video analysis is in progress, video is not available for playback';
  }

  const Icon = props.status === STATUS_PROCESSING ? CustomSpinner : WarningAmberRounded;

  return (
    <>
      {[STATUS_FAILED, STATUS_PROCESSING].includes(props.status) ? (
        <Tooltip title={tooltipText} placement="top">
          <Stack
            spacing={1}
            direction="row"
            alignItems="center"
            className={styles.BlockStatus}
            data-for="statusTooltip"
            data-tip={tooltipText}
          >
            <Icon
              fontSize="xSmall"
              htmlColor={
                playbackImmediately && props.status === STATUS_PROCESSING ? 'complimentary.main' : 'warning.main'
              }
              className={classNames(styles.Icon, {
                [styles.Icon___spin]: props.status === STATUS_PROCESSING,
              })}
            />
            {props.status === STATUS_PROCESSING && (
              <>
                {playbackImmediately && <CheckRounded fontSize="xSmall" htmlColor="complimentary.main" />}
                <Typography variant="captionSmall" color={playbackImmediately ? 'complimentary.main' : 'warning.main'}>
                  {STATUS_PROCESSING}
                </Typography>
                <InfoOutlined fontSize="xSmall" htmlColor="info.main" />
              </>
            )}
          </Stack>
        </Tooltip>
      ) : (
        <>
          {props.isSponsored && (
            <Box className={styles.Sponsored}>
              <Typography variant="caption" color="common.white">
                Sponsored
              </Typography>
            </Box>
          )}
        </>
      )}
    </>
  );
}

StatusBlockComponent.propTypes = {
  status: PropTypes.oneOf(['ACTIVE', 'PROCESSING', 'FAILED', 'DISABLED']).isRequired,
  playbackImmediately: PropTypes.bool,
  isSponsored: PropTypes.bool,
};

export default StatusBlockComponent;
