import React, { useState, useContext } from 'react';
import { Platform, StyleSheet } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { SBox } from '../../common/s-components/layout/s-box';
import { SText } from '../../common/s-components/typography/s-text';
import { theme } from '../../app/theme';
import { Icon } from '../../common/components/icon';
import { SH3 } from '../../common/s-components/typography/s-h3';
import { Touchable } from '../../common/components/touchable';
import { SAllVideoWrapper } from '../s-components/s-all-video-wrapper';
import { SIconWrapper } from '../s-components/s-icon-wrapper';
import { Router } from '../../common/utils/navigation-service';
import { ROUTES, ROUTE_PARAMS } from '../../app/constants';
import { MULTIPLE_VARIANT } from '../../youtube/constants';
import { ContextAllVideos } from '../context';
import { updateYoutubeListAnalytics } from '../services';

type TProps = {
  total: number;
  videoIds: string;
};

export const AllVideos: React.FC<TProps> = ({ total, videoIds }) => {
  const [pressed, setPressed] = useState(false);
  const gradientOpacity = pressed ? 0.7 : 0.9;
  const { trackParams } = useContext(ContextAllVideos);
  const isAndroid = Platform.OS === 'android';
  const topPadding = isAndroid ? 18 : 20;

  const onPress = () => {
    Router.goTo(ROUTES.youtube, {
      [ROUTE_PARAMS.youtubeVideoId]: videoIds,
      [ROUTE_PARAMS.youtubeVideoTotal]: total,
      [ROUTE_PARAMS.youtubeVariant]: MULTIPLE_VARIANT,
    });

    updateYoutubeListAnalytics({ ...trackParams, variant: MULTIPLE_VARIANT });
  };

  return (
    <Touchable testID="all-videos" onPress={onPress} togglePress={setPressed}>
      <SAllVideoWrapper>
        <LinearGradient
          colors={theme.gradients.youtubeAllVideoCard}
          style={[
            StyleSheet.absoluteFill,
            {
              borderRadius: 8,
              opacity: gradientOpacity,
              position: 'absolute',
              zIndex: 2,
            },
          ]}
        />
        <SIconWrapper>
          <Icon name="youtube" color="white" size={155} />
        </SIconWrapper>
        <SBox position="relative" zIndex={3} pt={topPadding} px={16}>
          <SH3 mb={5}>All Videos</SH3>
          <SText sm medium>
            {total} Videos
          </SText>
        </SBox>
      </SAllVideoWrapper>
    </Touchable>
  );
};