import React, { memo, useCallback } from 'react';
import useTimeoutFn from 'react-use/lib/useTimeoutFn';
import useUnmount from 'react-use/lib/useUnmount';
import { RefreshableView } from '../../common/components/refreshable-view';
import { BackButton } from '../../common/components/back-button';
import { ViewTrackUnavailable } from './view-track-unavailable';
import {
  ERouteSpecialParams,
  Router,
} from '../../common/utils/navigation-service';
import { SBox } from '../../common/s-components/layout/s-box';
import { getStatusBarHeight } from '../../common/transducers';
import { ROUTES } from '../../app/constants';
import { fp as _ } from '../../common/utils/fp';
import { TMarket } from '../../common/types';
import { TRoute } from '../types';
import { goToPlacement } from '../../playlist-placement/services';

type TProps = {
  market: TMarket;
  route: TRoute;
};

export const TrackUnavailable: React.FC<TProps> = memo(props => {
  const { route, market } = props;
  const goBack = () => {
    if (!_.path(['params', ERouteSpecialParams.gesturesDisabled], route)) {
      return Router.goBack();
    }

    goToPlacement({ replace: ROUTES.unavailabletrack });
  };

  const [, cancel] = useTimeoutFn(() => {
    if (_.path(['params', ERouteSpecialParams.enableAnimationOnMount], route)) {
      Router.setParamsFor(ROUTES.unavailabletrack, { noAnimation: false });
    }
  }, 200);

  useUnmount(cancel);

  const renderHeader = () => {
    const params = _.path('params', route);
    const safeArea = getStatusBarHeight();
    const headerHeight = safeArea + 80;
    return (
      <SBox height={headerHeight} position="relative">
        <BackButton
          testID="track-unavailable-back-button"
          onPress={() => goBack()}
          marginTop={0}
          top={55}
          iconName={
            _.path(ERouteSpecialParams.enableAnimationOnMount, params)
              ? 'close'
              : undefined
          }
        />
      </SBox>
    );
  };

  const renderBody = useCallback(() => {
    return (
      <>
        <ViewTrackUnavailable market={market} />
      </>
    );
  }, [market]);

  return (
    <RefreshableView
      testID="track-unavailable-refreshable-view"
      loading={false}
      renderHeader={renderHeader}
      renderBody={renderBody}
      name={ROUTES.unavailabletrack}
    />
  );
});