import React, { memo } 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 { ViewTrackEmpty } from './view-track-empty';
import {
  ERouteSpecialParams,
  Router,
} from '../../common/utils/navigation-service';
import { SBox } from '../../common/s-components/layout/s-box';
import { getStatusBarHeight } from '../../common/transducers';
import { ROUTE_PARAMS, ROUTES } from '../../app/constants';
import { fp as _ } from '../../common/utils/fp';
import { TRoute } from '../types';
import { goToPlacement } from '../../playlist-placement/services';

type TProps = {
  route: TRoute;
};

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

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

  const [, cancel] = useTimeoutFn(() => {
    if (_.path(['params', ERouteSpecialParams.enableAnimationOnMount], route)) {
      Router.setParamsFor(ROUTES.emptytrack, { 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-empty-back-button"
          onPress={() => goBack()}
          marginTop={0}
          top={55}
          iconName={
            _.path(ERouteSpecialParams.gesturesDisabled, params)
              ? 'close'
              : undefined
          }
        />
      </SBox>
    );
  };

  const renderBody = () => {
    return (
      <>
        <ViewTrackEmpty
          emptypageVariant={_.path(
            ['params', ROUTE_PARAMS.emptypageVariant],
            route
          )}
        />
      </>
    );
  };

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