import { useFormContext } from 'react-hook-form';

import YoutubeVideo from 'src/components/attachment/YoutubeVideo';

import { TASK_VIDEO_MAX_HEIGHT } from '../../constants';
import { type VideoTask, VideoTypes } from '../../types';

import MediaContainer from './MediaContainer';

type TaskVideoProps = {
  task: VideoTask;
};

const TaskVideo = ({ task }: TaskVideoProps) => {
  const { setValue } = useFormContext();

  const handleEnded = () => {
    setValue('multimediaFinished', true);
    setValue('finished', true);
  };

  return (
    <MediaContainer
      sx={{
        width: '100%',
        height: 'auto',
        maxHeight: TASK_VIDEO_MAX_HEIGHT,
        '& > *': {
          width: '100%',
          height: '100%',
          maxHeight: TASK_VIDEO_MAX_HEIGHT,
        },
      }}
    >
      {task.url && task.urlType === VideoTypes.YOUTUBE && (
        <YoutubeVideo
          src={task.url}
          onEnded={handleEnded}
        />
      )}
      {task.url && task.urlType === VideoTypes.INTERNAL && (
        <video
          src={task.url}
          controls
          controlsList="nodownload"
          onEnded={handleEnded}
        />
      )}
    </MediaContainer>
  );
};

export default TaskVideo;