import React, { memo, useContext } from 'react';
import { Pressable } from 'react-native';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SH4 } from '../../../common/s-components/typography/s-h4';
import { SLabelContainer } from '../../s-components/s-label-container';
import { SLabel } from '../../s-components/s-label';
import { SRowContainer } from '../../s-components/s-row-container';
import { ContextVideoData } from '../../contexts';
import { TEntityWithData } from '../../types';
import { fp as _ } from '../../../common/utils/fp';
import { openUrl } from '../../../common/utils/linking-service';
import { Icon } from '../../../common/components/icon';
// import { tiktokPartnerLinkOpened } from '../../../analytics';

type TProps = {};

export const Slide2: React.FC<TProps> = memo(() => {
  const { data } = useContext(ContextVideoData) as TEntityWithData;
  const published = _.path('data.published', data);
  const length = _.path('data.length', data);
  const url = _.path('data.videoUrl', data);
  // const id = _.path('data.id', data);
  // const name = _.path('data.title', data);
  // const source = _.path('data.source', data);

  return (
    <SBox alignSelf="center" ml={-70} pt={49}>
      <SRowContainer>
        <SLabelContainer>
          <SLabel>published</SLabel>
        </SLabelContainer>
        <SH4 medium>{published || 'N/A'}</SH4>
      </SRowContainer>
      <SRowContainer>
        <SLabelContainer>
          <SLabel>Length</SLabel>
        </SLabelContainer>
        <SH4 medium>{length || 'N/A'}</SH4>
      </SRowContainer>
      <SRowContainer>
        <SLabelContainer>
          <SLabel>Link</SLabel>
        </SLabelContainer>
        <Pressable
          onPress={() => {
            openUrl(url);
            // tiktokPartnerLinkOpened({
            //   video_id: id,
            //   video_name: name,
            //   video_source_type: source.toUpperCase(),
            // });
          }}
        >
          {({ pressed }) => (
            <Icon
              name="tiktok"
              color="white"
              size={19}
              ml={-1}
              mt={1}
              opacity={pressed || !url ? 0.7 : 1}
            />
          )}
        </Pressable>
      </SRowContainer>
    </SBox>
  );
});