import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  ImageBackground,
  TouchableOpacity,
} from 'react-native';
import R from '../../../assets/R';
import LinearGradient from 'react-native-linear-gradient';
import {getFontXD, HEIGHTXD, WIDTHXD} from '../../../Config/Functions';
import Block from '../../../components/Block';
import Icon from 'react-native-vector-icons/AntDesign';
import {useNavigation} from '@react-navigation/native';
import {MEDIADETAIL} from '../../../routers/ScreenNames';

const MediaView = (props) => {
  //   const {poster,title} = props.mediaHot;
  //   console.log(mediaHot);
  const navigate = useNavigation();
  if (props.mediaHot) {
    const {poster, title, published_at, id, video_id} = props.mediaHot;

    return (
      <ImageBackground
        resizeMode={'cover'}
        style={styles.containerTop}
        source={{uri: poster}}>
        <LinearGradient
          start={{x: 0, y: 0}}
          end={{x: 0, y: 1}}
          colors={[
            'rgba(0, 0, 0, 0)',
            'rgba(0, 0, 0, 0.0)',
            'rgba(0, 0, 0, 0.7)',
          ]}
          style={{flex: 1}}>
          <View style={{flex: 2}} />
          <View style={styles.contentTop}>
            <TouchableOpacity
              onPress={() =>
                navigate.navigate(MEDIADETAIL, {id, video_id, title})
              }>
              <Text numberOfLines={2} style={styles.txtBig}>
                {title}
              </Text>
            </TouchableOpacity>

            <Block row space={'between'} padding={[10, 10]}>
              <View style={{flexDirection: 'row'}}>
                <Icon
                  name={'calendar'}
                  color={R.colors.white}
                  size={getFontXD(46)}
                />
                <Text style={styles.txtDate}>{published_at}</Text>
              </View>
              <TouchableOpacity
                onPress={() =>
                  navigate.navigate(MEDIADETAIL, {id, video_id, title})
                }
                style={styles.containerBtn}>
                <Icon
                  name={'playcircleo'}
                  color={R.colors.white}
                  size={getFontXD(46)}
                />
                <Text style={styles.txtPlay}>Xem video</Text>
              </TouchableOpacity>
            </Block>
          </View>
        </LinearGradient>
      </ImageBackground>
    );
  }

  return (
    <View>
      <Text>H</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  containerTop: {
    height: HEIGHTXD(850),
    width: '100%',
  },
  contentTop: {
    padding: 10,
    flex: 1,
  },
  txtBig: {
    fontSize: getFontXD(52),
    color: R.colors.white,
    fontWeight: 'bold',
    textDecorationLine: 'underline',
  },
  containerBtn: {
    width: WIDTHXD(380),
    backgroundColor: '#1C6AF6',
    height: HEIGHTXD(120),
    borderRadius: HEIGHTXD(30),
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 1.84,
    elevation: 2,
  },
  txtPlay: {
    color: R.colors.white,
    fontSize: getFontXD(42),
    fontWeight: 'bold',
    marginLeft: 5,
  },
  txtDate: {
    color: R.colors.white,
    fontSize: getFontXD(42),
    marginLeft: 5,
  },
});

export default MediaView;
