import React from "react";
import {
    Page,
    Text,
    View,
    Document,
    StyleSheet,
    Image,Font 
} from "@react-pdf/renderer";
import moment from "moment";
import * as myConstClass from '../../constant.js';
import {
    T,
   Config,
   TF
  } from "react-translator-component";
  Config.default = localStorage.getItem("lang");
//import font from "./font.ttf"
// import font from "../../assets/Titillium_Web/TitilliumWeb-Regular.ttf";
// import bfont from "../../assets/Titillium_Web/TitilliumWeb-Bold.ttf";
// Font.register({
//     family: "Titillium",
//     format: "truetype",
//     //src: font
//     fonts: [
//       { src: font},
//       { src: bfont, fontWeight: 600 }
//       ]
//   });

const POSTER_PATH = "https://image.tmdb.org/t/p/w154";
let c,r;

Font.register({
  family: 'Times-Italic',
  fontWeight:900,
  fonts: [
   /* {
      src: `/Roboto-Regular.ttf`
    },
    {
      src: `/Roboto-Bold.ttf`,
      fontWeight: 'bold'
    },*/
    {
      //src: `/Roboto-Italic.ttf`,
      //fontWeight: 'normal',
      fontStyle: 'italic',
	   src: '/Roboto-Italic.ttf'
    }
	/*,
    {
      src: `/Roboto-BoldItalic.ttf`,
      fontWeight: 'bold',
      fontStyle: 'italic'
    }*/
  ]
})


const styles = StyleSheet.create({
    page: {
       // backgroundColor: "#ffffff",
        color:'#333333',
		fontStyle: 'italic',
      //  fontFamily: 'Titillium',
	  
    },
    // 
    section: {
        width: 200,
        '@media max-width: 400': {
          width: 300,
        },
        '@media orientation: landscape': {
          width: 400,
        },
      },
    movieContainer: {
        backgroundColor: "#ffffff",
        display: "flex",
        flexDirection: "row",
        padding: 16
    },
    table: {
        borderCollapse: "collapse",
        display: "flex",
        flexDirection: "row",
        marginRight: 10,
    
    },
        
    
    tableContainer: {
       //fontStyle: 'italic',
        display: "flex",
        flexDirection: "row",
        marginRight: 10,
   
    },
    tablenoteContainer: {
        //backgroundColor: "#dad0d0",
        
        display: "flex",
        flexDirection: "row",
        marginBottom: 5,
        marginRight: 118,
       
    },
    infoContainer: {
       
        display: "flex",
        flexDirection: "row",
        marginLeft: 5,
      
    },
    infoheadContainer: {
        backgroundColor: "#dad0d0",
        display: "flex",
        flexDirection: "row",
        marginLeft: 5,
      
    },
    tableheadContainer: {
        border:1,
        display: "flex",
        flexDirection: "row",
        marginBottom: 5,
        marginTop: 15,
        marginRight: 10,
        fontWeight:900,
        backgroundColor: "#e8dfdf",
    },
    tableheadEmpContainer:{
     
        display: "flex",
        flexDirection: "row",
        marginBottom: 5,
        marginTop: 15,
        marginRight: 10,
        fontWeight:900,
        backgroundColor: "#e8dfdf",
    },
    movieDetails: {
        display: "flex",
    },
    movieTitle: {
        fontSize: 12,
        marginBottom: 10,
        textAlign:'right',
       // fontFamily:'Titillium'
    },
    addressTitle: {
        fontSize: 12,
        marginBottom: 10
    },

    cellTitle: {
        fontSize: 12,
        padding:6,
        marginBottom: 10
    },

    tcellTitle: {
        fontSize: 12,
        paddingRight:16,
    },
    tmainTitle: {
        fontSize: 12,
        paddingRight:16
    },
    thmainTitle: {
        fontSize: 12,
        paddingRight:100
    },
    mainTitle: {
        fontSize: 12,
        marginBottom: 10,
        paddingTop:6
    },
    
    movieOverview: {
        fontSize: 10
    },

    image: {
        height: 200,
        width: 150
    },
    rating: {
        height: 70,
        width: 300
    },
});

export function PdfDocument(props) { 
    //const width = useWindowWidth();
    console.log('+++++++++++++++++++++++++++');
    console.log(props.data[0].data);
    console.log('+++++++++++++++++++++++++++');
    let hasKey = props.data[0].data.hasOwnProperty('name'); 
    // console.log(myConstClass.SITE_URL+props.data.org_logo_info.payslip_header_logo);
    return (
        <Document> 
            <Page       style={styles.page}>
            { props ? 
            <React.Fragment>
                <View style={styles.section}>
                 <View style={styles.tableheadEmpContainer}>
 {props.data[0].header.map((a, index) => {
     console.log('++++++++++++/////+++++++++++++++');
       console.log(a.text);
       console.log('+++++++++++/////////++++++++++++++++');
       return (<Text style={{fontSize: 5,border:1}}>{a.text}</Text>);
  

})
}



</View>

{props.data[0].data.map((a, index) => {
     console.log('++++++++++++/////+++++++++++++++');
       console.log(a.name);
       console.log('+++++++++++/////////++++++++++++++++');
    //  if(hasKey)
    //  {
        r=a.colorcode;
        return (
            <React.Fragment>
            <View style={styles.tableContainer}>
        <Text style={{fontSize: 5,border:1}}>{a.name}</Text>

        {props.data[0].date.map((k, index) => {
            c=k.date;
            // if(k.text!='Employee Name')
            // {

            // }
            // else{
                
                console.log('++++++++++++text+++++++++++++++');
                console.log(c);
                console.log('+++++++++++text++++++++++++++++');

                console.log('++++++++++++date+++++++++++++++');
                
                console.log(a.c);
                console.log('+++++++++++date++++++++++++++++');
                return (<Text style={{fontSize: 5,border:1,color:r}}>{a.Apr122023_date}</Text>);
            // }
        
    })
}
    </View>
  
    </React.Fragment>
        ) 
})
}
</View>
</React.Fragment> :''}
             </Page>
         </Document>
     );
      
}