import React, { memo, useCallback } from 'react';
import { Dimensions } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { TVisibility, TEntities, TDonutData, TEntityId } from '../types';
import { Skeleton } from './skeleton';
import { togglePopup } from '../../common/utils/swipeable-popup-service';
import { Portal } from '../../common/utils/portal/portal';
import { SwipeablePopup } from '../../common/components/bottom-sheet/swipeable-popup';
import { InfoStreamsMonitoring } from './info-streams-monitoring';
import { SBox } from '../../common/s-components/layout/s-box';
import { Wave } from './wave';
import { InfoTitle } from '../../common/components/info-title';
import { Tabs } from '../../common/components/tabs';
import { TabContent } from './tab-content';
import { StreamsEmpty } from '../../market/components/streams-empty';
import { theme } from '../../app/theme';
import {
  onInfoIconPress,
  CLICK_SOURCES,
  onMonitoringTabPress,
} from '../../analytics';
import { DONUT_TAB_SETTINGS } from '../constants';
import { TEntity, TRangeEntity } from '../../common/types';

const { width } = Dimensions.get('window');

type TProps = {
  visibility: TVisibility;
  entities: TEntities;
  range?: TRangeEntity;
  scrollToBottom: (withoutAnimation?: boolean) => void;
  setActiveTab: (id: TEntityId) => void;
  activeTab: TEntityId;
};

export const MarketMonitoring: React.FC<TProps> = memo(props => {
  const {
    activeTab,
    visibility,
    setActiveTab,
    scrollToBottom,
    range,
    entities,
  } = props;
  const boxPaddingBottom = visibility.empty ? 27 : visibility.error ? 61 : 57;
  const titlePaddingBottom = visibility.empty ? 0 : 65;

  const onSelectTab = useCallback(
    (id: string, name?: string): void => {
      setActiveTab(id as TEntityId);
      onMonitoringTabPress({ tab_type: name });

      setTimeout(() => {
        scrollToBottom(false);
      });
    },
    [setActiveTab, scrollToBottom]
  );

  const infoPressHandler = (variant: string): void => {
    togglePopup(variant);
    onInfoIconPress({ source_section: CLICK_SOURCES.STREAMS_MONITORING });
  };

  const renderPopup = () => {
    return (
      <>
        <Portal id="market-monitoring">
          <SwipeablePopup
            variant="streams-monitoring"
            content={<InfoStreamsMonitoring />}
          />
        </Portal>
      </>
    );
  };

  const renderTabs = useCallback(() => {
    return (
      <SBox position="relative" bg="ebonyClay" pb={30}>
        <SBox position="absolute" zIndex={-1} top={-37}>
          <Wave />
        </SBox>
        <Tabs
          // testID="market-monitoring-tabs"
          active={activeTab}
          withScroll
          horizontalOffset={16}
          tabGap={44}
          tabs={[
            DONUT_TAB_SETTINGS.SPOTIFY,
            DONUT_TAB_SETTINGS.APPLE,
            DONUT_TAB_SETTINGS.AMAZON,
            DONUT_TAB_SETTINGS.DSP,
          ]}
          onSelect={onSelectTab}
        />
      </SBox>
    );
  }, [activeTab]);

  const renderBody = useCallback(() => {
    const entity = entities[activeTab as TEntityId] as TEntity<TDonutData>;

    return (
      <SBox position="relative" height={300}>
        <TabContent entity={entity} range={range} />
      </SBox>
    );
  }, [range, activeTab, entities]);

  const renderFooterBg = () => (
    <SBox position="absolute" top={80} width={width} height="100%">
      <LinearGradient
        colors={theme.gradients.donut}
        locations={[0, 0.2, 1]}
        style={{
          position: 'absolute',
          left: 0,
          right: 0,
          top: 0,
          height: 250,
        }}
      />
    </SBox>
  );

  return (
    <SBox bg="ebonyClay">
      {renderPopup()}
      {visibility.skeleton ? <Skeleton /> : null}
      {!visibility.skeleton ? (
        <SBox overflow="hidden" pb={boxPaddingBottom}>
          <SBox position="relative" px={16} pb={titlePaddingBottom}>
            <InfoTitle
              testID="info-title-streams-monitoring"
              onPress={() => {
                infoPressHandler('streams-monitoring');
              }}
              title="Streams Monitoring"
            />
          </SBox>
          {!visibility.empty ? (
            <SBox position="relative">
              {renderFooterBg()}
              {renderTabs()}
              {renderBody()}
            </SBox>
          ) : null}
          {visibility.empty ? (
            <SBox mt={19}>
              <StreamsEmpty mb={38} />
            </SBox>
          ) : null}
        </SBox>
      ) : null}
    </SBox>
  );
});