import React, { useState } from 'react';
import { useNavigation } from '@react-navigation/native';
import YCImage from './YCImage';
import Button from './Button';

import
{
  StyleSheet,
  View,
  Text,
  Alert,
  ActivityIndicator,
} from 'react-native';

import
{
  Connect,
  type StreamingContent,
  type StreamingContentDetails
} from 'react-native-younify-connect-sdk';

const YounifyDetails = React.forwardRef((_props, ref) =>
{
  const connect = Connect.shared;
  const navigation = useNavigation();

  interface ContentItemDetails
  {
    contentItem: StreamingContent | undefined;
    details: StreamingContentDetails | undefined;
    isLoading: boolean;
  }

  const [detailsState, setDetailsState] = useState<ContentItemDetails>();

  const getDetails = async (item: StreamingContent) =>
  {
    setDetailsState({ contentItem: item, details: undefined, isLoading: true });
    try
    {
      let details = await connect.fetchContentDetails(item, null);
      setDetailsState({ contentItem: item, details: details, isLoading: false });
    }
    catch (e: any)
    {
      console.log("browse content failed: " + e);
      Alert.alert(e);
    }
  };

  React.useImperativeHandle(ref, () => ({
    async getDetails(item: StreamingContent)
    {
      await getDetails(item);
    }
  }));

  return(
    <View style={ styles.detailsView }>
      <View style={ styles.backButtonView }>
        <Button title=" < Back " onPress={ () => navigation.goBack() } />
      </View>
      <ActivityIndicator animating={ detailsState?.isLoading } />
      <YCImage
        name="detailsImage"
        connect={ connect }
        url={ detailsState?.contentItem?.largeThumbnailUrl }
        style={ styles.contentItemDetailsImage }
      />
      <Text>Title: { detailsState?.contentItem?.title }</Text>
      <Text>Overview: { detailsState?.contentItem?.overview }</Text>
      <Text>Duration: { detailsState?.contentItem?.duration }</Text>
      <Text>Air Date: { detailsState?.contentItem?.airDate ? new Date(detailsState.contentItem.airDate).toLocaleDateString() : '' }</Text>
      <Text>Series: { detailsState?.contentItem?.series }</Text>
      <Text>Season: { detailsState?.contentItem?.season }</Text>
      <Text>Episode: { detailsState?.contentItem?.episode }</Text>
      <Text>Release Year: { detailsState?.contentItem?.releaseYear }</Text>
      <Text>Content Rating: { detailsState?.contentItem?.contentRating }</Text>
      <Text>Watch Url: { detailsState?.contentItem?.watchNowUrl }</Text>
      <Text>TMDB ID: { detailsState?.contentItem?.tmdbID }</Text>
      <Text>TMDB Series ID: { detailsState?.contentItem?.tmdbSeriesID }</Text>
      <Text>Estimated Duration: { detailsState?.details?.estimatedDuration }</Text>
    </View>
  )
});

const styles = StyleSheet.create
(
  {
    backButtonView:
    {
      alignItems: 'flex-start',
    },
    detailsView:
    {
      paddingTop: 20,
      paddingLeft: 10,
      paddingRight: 10,
      flex: 1,
    },
    contentItemDetailsImage:
    {
      width: '100%',
      height: 225,
      resizeMode: 'contain'
    }
  }
);

export default YounifyDetails;