import React from 'react';
import { Router } from '../../common/utils/navigation-service';
import { ROUTE_PARAMS, ROUTES } from '../../app/constants';
import { VideoData } from './video-data';
import { SBox } from '../../common/s-components/layout/s-box';
import { TEntityVisibility } from '../../common/types';
import { fp as _ } from '../../common/utils/fp';
import { SText } from '../../common/s-components/typography/s-text';
import { PAGES, updatePageMeta } from '../../analytics';
import { TState as TTrackState } from '../../track/types';
import { isEmptyVideoData, hasVideoData, hasVideoError } from '../transducers';

type TProps = {
  youtubeVisibility: TEntityVisibility;
  tiktokVisibility: TEntityVisibility;
  track: TTrackState['track'];
};

export const TrackVideo: React.FC<TProps> = props => {
  const { youtubeVisibility, tiktokVisibility, track } = props;
  const isEmpty = isEmptyVideoData(
    youtubeVisibility.empty,
    tiktokVisibility.empty,
    youtubeVisibility,
    tiktokVisibility
  );
  const videoError = hasVideoError(youtubeVisibility, tiktokVisibility);
  const hasData = hasVideoData(youtubeVisibility, tiktokVisibility);
  const isLoading = youtubeVisibility.skeleton || tiktokVisibility.skeleton;
  const errorText = isEmpty
    ? 'No video data available.'
    : 'Video data failed to load.';

  return (
    <SBox zIndex={1} mb={40}>
      {hasData || isLoading ? (
        <SBox mx={16}>
          {isEmpty || videoError ? (
            <SBox height={44} bg="fiord" borderRadius={8} py={12}>
              <SText textAlign="center" lineHeight="20px" mt={-1}>
                {errorText}
              </SText>
            </SBox>
          ) : (
            <VideoData
              youtubeVisibility={youtubeVisibility}
              tiktokVisibility={tiktokVisibility}
              onYoutubePress={() => {
                Router.goTo(ROUTES.youtubelist);

                updatePageMeta({
                  page: PAGES.Youtubelist.page,
                  source_track_id: _.path('data.id', track),
                  source_track_name: _.path('data.name', track),
                  source_track_isrc: _.path('data.isrc', track),
                });
              }}
              onTiktokPress={() => {
                Router.goTo(ROUTES.tiktok, {
                  [ROUTE_PARAMS.tiktokIsrc]: _.path('data.isrc', track),
                  [ROUTE_PARAMS.tiktokTrackId]: _.path('data.id', track),
                });

                updatePageMeta({
                  page: PAGES.Tiktok.page,
                  source_track_id: _.path('data.id', track),
                  source_track_name: _.path('data.name', track),
                  source_track_isrc: _.path('data.isrc', track),
                });
              }}
            />
          )}
        </SBox>
      ) : null}
    </SBox>
  );
};