import React from 'react';
import { useParams } from 'react-router';
import YoutubePlayer from '../../components/complex/youtube-player';
import BackBtn from '../../components/common/back-btn';
import ShareBtn from '../../components/common/share-btn';
import PlainText from '../../components/composite/plain-text';
import useCocoApi from '../../hooks/fetch/request';
import useScrollTo from '../../hooks/common/useScrollTo';
import useSetMetaOgDescription from '../../hooks/share/useSetMetaOgDescription';
import { WatchComedianRecommendations, WatchRecommendations } from './recommendations';

import './index.scss';

export default function Watch() {
  const { videoId } = useParams();
  const [data = {}, error] = useCocoApi({
    path: `/use/videos/${videoId}`
  });
  const btnData = { id: videoId, name: '' };
  const { title, comedianId } = data;
  const shareBtnData = { text: title, title };

  useScrollTo({ scrollTop: 0, dependencies: [videoId], delay: 300 });
  useSetMetaOgDescription({ content: title, dependencies: [title] });

  return (
    <>
      <YoutubePlayer id={videoId} />
      <div className="title">
        <PlainText text={title} />
      </div>
      <div className="navigation">
        <BackBtn data={btnData} />
        <ShareBtn data={shareBtnData} />
      </div>
      <div className="recommendations">
        <WatchComedianRecommendations comedianId={comedianId} currentVideoId={videoId} />
        <WatchRecommendations currentVideoId={videoId} />
      </div>
    </>
  );
}