import React, {useState} from 'react';
import {
  View,
  Text,
  SafeAreaView,
  Image,
  Dimensions,
  ScrollView,
  Linking,
} from 'react-native';
import PlayButton from '../../components/PlayButton';
import TransparentBackHeader from '../../components/TransparentBackHeader';
import style from './style';

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

const MovieDetail = props => {
  const {movieDetail} = props.route.params;
  const [isBookmarked, setIsBookmarked] = useState(false);

  const goBack = () => {
    props.navigation.goBack();
  };

  const openYoutube = () => {
    if (movieDetail.youtube !== undefined) {
      Linking.openURL(movieDetail.youtube).catch(error =>
        console.log('open youtube failed', error),
      );
    }
  };

  return (
    <ScrollView contentContainerStyle={style.container}>
      <SafeAreaView style={style.headerContainer}>
        <TransparentBackHeader
          onPressBack={goBack}
          isBookmarked={isBookmarked}
        />
      </SafeAreaView>
      <Image
        source={{
          uri: movieDetail?.image,
          width: deviceWidth,
          height: deviceWidth * 1.2,
        }}
      />
      <View style={style.contentContainer}>
        <PlayButton style={style.playButton} onPress={openYoutube} />
        <Text style={style.titleText}>{movieDetail?.title}</Text>
        <Text style={style.subtitle}>{movieDetail?.stars}</Text>
        <Text style={style.subtitle}>{`Year: ${movieDetail?.year}`}</Text>
        <Text style={style.descriptionText}>{movieDetail?.plot}</Text>
      </View>
    </ScrollView>
  );
};

export default MovieDetail;