import React, { useContext, memo } from 'react';
import { Portal } from '../../../common/utils/portal/portal';
import { SwipeablePopup } from '../../../common/components/bottom-sheet/swipeable-popup';
import { POPUP_INFO_ID } from '../../constants';
import { InfoPopup } from './info-popup';
import { InfoTitle } from '../../../common/components/info-title';
import { togglePopup } from '../../../common/utils/swipeable-popup-service';
import {
  CLICK_SOURCES,
  onInfoIconPress,
  onTrackPlaylistsVendorTabPress,
} from '../../../analytics';
import { ContextHeader } from '../../contexts';
import { TContextHeader, TState as TTrackPlaylistsState } from '../../types';
import { Tabs } from '../../../common/components/tabs';
import { Wave } from './wave';
import { SBox } from '../../../common/s-components/layout/s-box';
import { Skeleton } from './skeleton';

export const Header = memo(() => {
  const infoPressHandler = (variant: string) => {
    togglePopup(variant);
    onInfoIconPress({ source_section: CLICK_SOURCES.PLAYLIST_INFORMATION });
  };

  const renderFgLayer = () => {
    return (
      <>
        <Portal id="track-playlists:header">
          <SwipeablePopup variant={POPUP_INFO_ID} content={<InfoPopup />} />
        </Portal>
      </>
    );
  };

  const props: TContextHeader = useContext(ContextHeader);
  const { activeTab, setActiveTab, loading, refresh } = props;
  const showSkeleton = loading && !refresh;

  return (
    <>
      {renderFgLayer()}
      {showSkeleton ? (
        <SBox pb={52}>
          <Skeleton />
        </SBox>
      ) : null}
      {!showSkeleton ? (
        <>
          <Wave />
          <InfoTitle
            testID="info-title-playlist-information"
            onPress={() => {
              infoPressHandler(POPUP_INFO_ID);
            }}
            px={16}
            mb={52}
            mt={0}
            title="Playlist Information"
          />
          <SBox mb={38}>
            <Tabs
              // testID="track-playlists-tabs"
              active={activeTab as string}
              tabs={[
                { id: 'spotify', name: 'spotify' },
                { id: 'apple', name: 'apple music' },
                { id: 'amazon', name: 'amazon' },
              ]}
              onSelect={(tab: string) => {
                setActiveTab(tab as TTrackPlaylistsState['activeTab']);
                onTrackPlaylistsVendorTabPress({ source_vendor: tab });
              }}
            />
          </SBox>
        </>
      ) : null}
    </>
  );
});