import React, {Component, Fragment} from 'react';

import {findDOMNode} from 'react-dom';

import server from 'axios';
import $ from 'jquery';
// intl messages
import TranslateMessage from 'Util/IntlMessages';
// page title bar
import FormControl from "@material-ui/core/FormControl";
import FormGroup from "@material-ui/core/FormGroup";
import InputLabel from "@material-ui/core/InputLabel";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import Tab from "@material-ui/core/Tab";
import Tabs from "@material-ui/core/Tabs";
import AppBar from "@material-ui/core/AppBar";
import SnackBar from "@material-ui/core/Snackbar/Snackbar";
import SnackBarContent from "@material-ui/core/SnackbarContent/SnackbarContent";
import Avatar from '@material-ui/core/Avatar';
import capitalize from 'capitalize';
import Capitalize from 'capitalize';
import jsPDF from 'jspdf';
import 'jspdf-autotable';
import { Alert, Badge, Card, CardBody, CardColumns, CardFooter, CardTitle, Col,
Modal,
Form, ModalBody, ModalFooter, ModalHeader, Row } from "reactstrap";
import MatButton from "@material-ui/core/Button";
import app from "Constants/AppConfig";
import logos from "Constants/logos";
import InputAdornment from "@material-ui/core/InputAdornment/InputAdornment";
import Tooltip from "@material-ui/core/Tooltip/Tooltip";
import IconButton from "@material-ui/core/IconButton/IconButton";
import List from "@material-ui/core/List/List";
import ListItem from "@material-ui/core/ListItem/ListItem";
import ListItemText from '@material-ui/core/ListItemText';
import Button from "@material-ui/core/Button/Button";
import Input from "@material-ui/core/Input/Input";
import TextField from "@material-ui/core/TextField/TextField";
import FormControlLabel from "@material-ui/core/FormControlLabel/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox/Checkbox";
import generator from "voucher-code-generator";
import SweetAlert from "react-bootstrap-sweetalert";
import {NotificationManager} from "react-notifications";
import CircularProgress from "@material-ui/core/CircularProgress/CircularProgress";
import TableUI from '@material-ui/core/Table';
import PageTitleBar from "Components/PageTitleBar/PageTitleBar";
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Popover from '@material-ui/core/Popover';
import Typography from '@material-ui/core/Typography';
import FormHelperText from '@material-ui/core/FormHelperText';
import TranslateMessages from "Util/IntlMessages";

class ReportPersonalFile extends Component {

state = {
 urlSearchPerson: 'search-person',

showSearch:true,
userType:'',
searchParam:'',
searchValue:'',
searchResult:[],
showSearchTable:false,
showMessageNotFound:false,
loading:false,

// SnackBar
variant: '',
vertical: 'bottom',
horizontal: 'right',
snackBar: false,
snackBarMessage: '',

};

componentDidMount() {

handleChange = field => event => {

switch (field) {
case 'search-value':
this.setState({searchValue: event.target.value.toUpperCase()});
break;
default: break;
}
};

handleSearchPerson = event => {

event.preventDefault();
const {searchValue} = this.state;
if(searchValue){
if(typeof(searchValue)==='number'){
const url = app.api + this.state.urlSearchPerson + app.slash + 'DNI' +
app.slash + searchValue;
}else{
const url = app.api + this.state.urlSearchPerson + app.slash + 'text' +
app.slash + searchValue;
}
server.get(url).then(res=>{

})
.catch(() => {
this.setState({
loading: false,
snackBar: true,
snackBarMessage: (
<Fragment>
<i className={'ti-alert'}/> Error al procesar petición
</Fragment>
 )
});
});
}else {
this.setState({
snackBar: true,
variant: 'warning',
snackBarMessage: 'Ingrese los parámetros de búsqueda solicitados'
});
}

if (userType && searchValue && searchParam) {

this.setState({loading: true});
const url = app.apiURL + this.state.urlSearchPerson + app.separatorURL
+ userType + app.separatorURL + searchParam + app.separatorURL + searchValue;
server.get(url).then(res => {
if (res.data.length > 0) {
this.setState({searchResult: res.data, showSearchTable: true,
showMessageNotFound: false});
} else {
this.setState({showMessageNotFound: true, searchResult: [],
showSearchTable: false});
}
this.setState({loading: false});
}).catch(() => {
this.setState({
loading: false,
snackBar: true,
snackBarMessage: (
<Fragment>
<i className={'ti-alert'}/> Error al procesar petición
</Fragment>
)
});
});
}
};

imprimir = () => {
const input = document.getElementById('imprimir-pdf');
const inputHeightMm = pxToMm(input.offsetHeight);
const a4WidthMm = 210;
const a4HeightMm = 297;
const a4HeightPx = mmToPx(a4HeightMm);
const numPages = inputHeightMm <= a4HeightMm ? 1 : Math.floor(inputHeightMm
/ a4HeightMm) + 1;
console.log({
input, inputHeightMm, a4HeightMm, a4HeightPx, numPages, range: range(0,
numPages),
comp: inputHeightMm <= a4HeightMm, inputHeightPx: input.offsetHeight
});

html2canvas(input)
.then((canvas) => {
const imgData = canvas.toDataURL('image/png');
 // Document of a4WidthMm wide and inputHeightMm high
let pdf;
if (inputHeightMm > a4HeightMm) {
// elongated a4 (system print dialog will handle page breaks)
pdf = new jsPDF('p', 'mm', [inputHeightMm + 16, a4WidthMm]);
} else {
// standard a4
pdf = new jsPDF();
}

pdf.addImage(imgData, 'PNG', 0, 0);

pdf.save(`${'download-imprimir-pdf'}.pdf`);
});
};

render() {
const
{showSearch,userType,searchParam,searchResult,searchValue,loading,showMessageNotFou
nd,
showSearchTable} = this.state;
const {match} = this.props;
return (
<div className="report-wrapper mb-20">
<PageTitleBar title={<TranslateMessages id={'sidebar.reports-
title.personal-file'}/>} match={match}/>
{ showSearch &&
<Row style={{marginBottom: "10px"}}>
<Col xs={12} sm={12} md={12} lg={12} xl={12}>
<CardColumns className="col-md-12" style={{padding:
'0', display: 'inline-table'}}>
<Card>
<CardBody>
<CardTitle className="text-uppercase">
<TranslateMessages
id="card.heading.makeSearch"/>
</CardTitle>
<Form onSubmit={(event) =>
this.handleSearchPerson(event)}>
<Row>
<Col xs={12} sm={12} md={12}
lg={12} xl={12}>
<FormGroup>
<FormControl fullWidth
margin="normal">
<InputLabel>Ingrese
parámetro de búsqueda</InputLabel>
<Input
id="search-value"
type="text"
value={searchValue}

onChange={this.handleChange('search-value')}
endAdornment={
<InputAdornment
position="end">
{
searchValue &&

<Fragment>

<Tooltip title="Limpiar">

<IconButton

onClick={() => this.setState({searchValue: ''})}>

<i className="material-icons">close</i>

</IconButton>

</Tooltip>

<Tooltip title="Buscar">

<IconButton type="submit">

<i className="material-icons">search</i>

</IconButton>

</Tooltip>

</Fragment>
}

</InputAdornment>
}
/>
</FormControl>
</FormGroup>
</Col>
</Row>
</Form>
{
loading &&
<Row>
<Col xs={12} sm={12} md={12}
lg={12} xl={12}>
<CircularProgress
className="progress-danger
mb-10 text-center"
style={{
marginTop: '25px',
marginLeft: 'auto',
marginRight: 'auto'
}} size={25}
mode="determinate" value={30} min={0}
max={50}/>
</Col>
</Row>
}
{
showSearchTable && !loading &&
<Row style={{marginTop: '10px'}}>
<Col xs={12} sm={12} md={12}
lg={12} xl={12}>
<Scrollbars
className="rct-scroll"
autoHeightMax={457}
autoHeight
style={{
border: '1px solid
rgba(0, 0, 0, 0.125)',
borderRadius: '5px'
}}
>
<Table>
<TableBody>
{
!loading &&
searchResult &&

searchResult.map((user, key) => (

<TableRow
hover key={key}>

<TableCell>

<Media>

<Media left>

<Media object

src={

user.photo !== null ?

app.staticURL + 'photography' + app.separatorURL + user.photo + '?v=' +

moment().format('YYYYMMDDhhmmss') :

user.gender === 'Masculino' ?

require('Assets/avatars/default/v1/man.jpg') :

user.gender === 'Femenino' ?

require('Assets/avatars/default/v1/woman.jpg') :

require('Assets/avatars/default/v1/no-image.png')

alt="Profile"

className="rounded-circle mr-20"

width="40"

height="40"

/>
</Media>

</Media>

</TableCell>

<TableCell>

{user.document_number}

<small className="text-muted"

style={{marginLeft: '10px'}}>DNI

</small>

</TableCell>

<TableCell>
{`$
{user.name} ${user.paternal} ${user.maternal}`}

<small

className={`text-uppercase text-teal`}

style={{marginLeft: '10px'}}>

{user.tipo_persona}

</small>

</TableCell>

{user.state === true ?

<TableCell>

<Badge

color="success">Habilitado</Badge>

</TableCell>
:
<TableCell>

<Badge

color="danger">Deshabilitado</Badge>

</TableCell>
}

<TableCell>

<Tooltip

title="Visualizar información">
<IconButton

className="text-primary"

onClick={() => this.handleSelectUser(user)}

aria-label="Delete">

<i className="material-icons">remove_red_eye</i>

</IconButton>

</Tooltip>

</TableCell>
</TableRow>
))
}
</TableBody>
</Table>
</Scrollbars>
</Col>
<Col xs={12} sm={12} md={12}
lg={12} xl={12}
style={{marginTop: '10px'}}>
<small className="text-muted">
{`Se encontraron $
{searchResult.length} coincidencias.`}
</small>
</Col>
</Row>
}
{
showMessageNotFound && !loading &&
<Row style={{marginTop: '10px'}}>
<Col xs={12} sm={12} md={12}
lg={12} xl={12}>
<small className="text-danger">
{`No se encontraron
registros según los parámetros de búsqueda.`}
</small>
</Col>
</Row>
}
</CardBody>
</Card>
</CardColumns>
</Col>
</Row>
}
</div>
)
}
};
export default ReportPersonalFile;