import React, { memo, useCallback } from 'react';
import { LinearGradient } from 'expo-linear-gradient';
import { Dimensions } from 'react-native';
import { InfoTitle } from '../../common/components/info-title';
import { SBox } from '../../common/s-components/layout/s-box';
import { TVisibility, TParsedEntity } from '../types';
import { Skeleton } from './skeleton';
// import { ErrorBlock } from '../../common/components/error-block';
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 { InfoDemographic } from './info-demographic';
// import {
//   CLICK_SOURCES,
//   onInfoIconPress,
//   // onMonitoringTabPress,
// } from '../../analytics';
import { StreamsEmpty } from '../../market/components/streams-empty';
import { theme } from '../../app/theme';
import { Wave } from './wave';
import { Tabs } from '../../common/components/tabs';
import { TabContent } from './tab-content';
import { TAB_SETTINGS } from '../constants';
import { InfoDistributionPopup } from './info-distribution-popup';
import { TCustomRangeEntity, TVendor } from '../../common/types';
import { TData } from '../../track/types';
import { CLICK_SOURCES, onInfoIconPress } from '../../analytics';

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

type TProps = {
  setTab: (vendor: TVendor) => void;
  range?: TCustomRangeEntity;
  entity: TParsedEntity;
  activeTab: TVendor;
  trackData: TData | {};
  visibility: TVisibility;
};

export const MarketDemographics: React.FC<TProps> = memo(props => {
  const { activeTab, setTab, range, entity, visibility, trackData } = props;
  const titlePaddingBottom = visibility.empty ? 19 : 53;
  // onSelectTab = (id, name) => {
  const onSelectTab = useCallback(
    (id: string) => {
      // const { setTab, scrollToBottom } = this.props;
      setTab(id as TVendor);
      // onMonitoringTabPress({ tab_type: name });
      //
      // setTimeout(() => {
      //   scrollToBottom(false);
      // });
    },
    [setTab]
  );

  const infoPressHandler = (variant: string) => {
    togglePopup(variant);
  };

  const renderPopup = useCallback(() => {
    const { data } = entity;
    const params = {
      data,
      range,
    };

    return (
      <>
        <Portal id="market-demographic" updateIfAnyChanged={params}>
          <SwipeablePopup
            fullheight
            variant="market-demographic"
            content={<InfoDemographic />}
          />
          <SwipeablePopup
            fullheight
            variant="market-male-distribution"
            content={
              <InfoDistributionPopup data={data} gender="male" range={range!} />
            }
          />
          <SwipeablePopup
            fullheight
            variant="market-female-distribution"
            content={
              <InfoDistributionPopup
                data={data}
                gender="female"
                range={range!}
              />
            }
          />
          <SwipeablePopup
            fullheight
            variant="market-non-binary-distribution"
            content={
              <InfoDistributionPopup
                data={data}
                gender="neutral"
                range={range!}
              />
            }
          />
          <SwipeablePopup
            fullheight
            variant="market-unknown-distribution"
            content={
              <InfoDistributionPopup
                data={data}
                gender="unknown"
                range={range!}
              />
            }
          />
        </Portal>
      </>
    );
  }, [range, entity]);

  const renderTabs = useCallback(() => {
    return (
      <SBox position="relative" bg="ebonyClay" pb={34}>
        <SBox position="absolute" zIndex={-1} top={-26}>
          <Wave />
        </SBox>
        <SBox px={8}>
          <Tabs
            // testID="market-demographics-tabs"
            active={activeTab}
            horizontalOffset={8}
            tabs={[TAB_SETTINGS.SPOTIFY, TAB_SETTINGS.APPLE]}
            onSelect={onSelectTab}
          />
        </SBox>
      </SBox>
    );
  }, [activeTab]);

  const renderBody = useCallback(() => {
    return (
      <SBox position="relative">
        <TabContent
          entity={entity}
          range={range!}
          activeTab={activeTab}
          onPressCard={infoPressHandler}
          trackData={trackData}
        />
      </SBox>
    );
  }, [range, entity, activeTab, trackData]);

  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={theme.colors.ebonyClay} pb={54}>
      {renderPopup()}

      {visibility.skeleton ? <Skeleton /> : null}

      {!visibility.skeleton ? (
        <>
          <SBox mx={16} pb={titlePaddingBottom}>
            <InfoTitle
              testID="info-title-audience-demographics"
              title="Audience Demographics"
              onPress={() => {
                onInfoIconPress({
                  source_section: CLICK_SOURCES.AUDIENCE_DEMOGRAPHICS,
                });
                infoPressHandler('market-demographic');
              }}
            />
          </SBox>

          {visibility.empty ? <StreamsEmpty mb={0} /> : null}

          {!visibility.empty ? (
            <SBox position="relative">
              {renderFooterBg()}
              {renderTabs()}
              {renderBody()}
            </SBox>
          ) : null}
        </>
      ) : null}
    </SBox>
  );
});