import React, { memo, useRef } from 'react';
import { Dimensions, Platform, ScrollView } from 'react-native';
import { ErrorBlock } from '../../common/components/error-block';
// import { Skeleton1 } from './skeleton1';
import { TCustomRangeEntity, TVendor } from '../../common/types';
import { SBox } from '../../common/s-components/layout/s-box';
import { Header } from './header';
import { ByAgeCardDominator } from './by-age-card-dominator';
import { ByAgeCard } from './by-age-card';
import { Empty } from './empty';
import { AGE_HEIGHT } from '../constants';
import { TByAgeEntityColorized } from '../types';
import { useRestoreScroll } from '../../common/hooks/use-restore-scroll';

type TProps = {
  byAge?: TByAgeEntityColorized;
  range: TCustomRangeEntity;
  total?: number;
  isEmpty: boolean;
  isError: boolean;
  vendor: TVendor;
};

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

export const ByAge: React.FC<TProps> = memo(props => {
  const { byAge, range, total, isEmpty, isError, vendor, ...rest } = props;
  const offsetX = useRef(0);

  const scrollViewRef = useRef<ScrollView>(null);

  const { onScrollEndHandler } = useRestoreScroll(scrollViewRef);

  const { dominator, cards, colors } = byAge || {};
  const vendorText = vendor === 'spotify' ? 'Spotify' : 'Apple Music';
  return (
    <SBox {...rest}>
      <Header title="By Age" range={range} pb={20} px={16} />

      {isEmpty && !isError ? (
        <Empty vendor={vendor} vendorText={vendorText} />
      ) : null}

      {isError && !isEmpty ? (
        <ErrorBlock
          height={AGE_HEIGHT}
          message={`${vendorText} data failed to load.`}
        />
      ) : null}

      {!isEmpty && !isError ? (
        <ScrollView
          scrollEnabled
          horizontal
          showsHorizontalScrollIndicator={false}
          contentContainerStyle={{ paddingLeft: verticalOffset }}
          ref={scrollViewRef}
          onContentSizeChange={contentWidth => {
            if (
              (Platform.OS === 'android' &&
                width + offsetX.current - verticalOffset) > contentWidth
            ) {
              setTimeout(() => {
                scrollViewRef!.current!.scrollToEnd();
              });
            }
          }}
          onScrollEndDrag={onScrollEndHandler}
          onMomentumScrollEnd={onScrollEndHandler}
        >
          {byAge && dominator ? (
            <ByAgeCardDominator byAge={byAge} colors={colors!} />
          ) : null}

          {cards
            ? cards.map((card, index) => (
                <ByAgeCard
                  // eslint-disable-next-line react/no-array-index-key
                  key={index}
                  card={card}
                  total={total!}
                  colors={colors!}
                />
              ))
            : null}
        </ScrollView>
      ) : null}
    </SBox>
  );
});