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

import useEditableComponent from '../useEditableComponent';
import { Box, Typography } from '@/mui/components';

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

function VideoDescription({ isEditable = false, isWide = false, editableComponent = null, ...props }) {
  const { isShowedEditable, handleHideEditable, handleShowEditable } = useEditableComponent(isEditable);

  const getDescription = () => {
    switch (true) {
      case !props.plot.length:
        return 'No Description yet...';
      case isWide:
        return props.plot;
      default:
        return (
          <Typography rows={2} title={props.plot}>
            {props.plot}
          </Typography>
        );
    }
  };

  return (
    <Box
      className={classNames(styles.Wrapper, {
        [styles.Wrapper___wide]: isWide,
      })}
    >
      <Typography
        component="div"
        variant="body2"
        color={props.plot.length ? 'text.secondary' : 'text.disabled'}
        onClick={handleShowEditable}
        className={classNames(styles.Container, {
          [styles.Container___isEditable]: isEditable,
        })}
      >
        {isShowedEditable ? editableComponent(handleHideEditable) : getDescription()}
      </Typography>
    </Box>
  );
}

VideoDescription.propTypes = {
  plot: PropTypes.string.isRequired,
  isEditable: PropTypes.bool,
  isWide: PropTypes.bool,
  editableComponent: PropTypes.func,
};

export default VideoDescription;
