import React from 'react';

import {
  _,
  ReactSelect as Select,
  PageHeader,
  Panel,
  helpers,
  FcDocument,
} from 'components';
import { List as Lists, Alert, Stack, Grid } from '@mui/material';
import { Button } from '@progress/kendo-react-buttons';
import moment from 'moment';

//pdf
import { PDFExport, savePDF } from '@progress/kendo-react-pdf';
import SquarePdf from './SquarePdf';
import EightDReport from './8DReport';

import { PDFViewer } from '@progress/kendo-react-pdf-viewer';
//import { SampleFileBase64 } from './SampleFileBase64';

import { ERCCA } from 'apps/ERCCA/constants';
import './Form.scss';

export default class FormTable extends React.PureComponent {
  constructor(props) {
    super(props);
    this._isMounted = false;
    this.state = {};

    this.FourSquare = React.createRef();
    this.pdfExportComponent = React.createRef();
  }

  componentDidMount() {
    // console.log('this.props.authUser :>> ', this.props.authUser);
    this._isMounted = true;
    helpers.debounce(`FormTable-initialize`, async () => {
      this.initialize();
    });
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  initialize = async () => {
    // console.log(this.props.match.params.id);

    if (this._isMounted) {
      const rccaDetail = await ERCCA.model.rccaDetail.find({
        rcca_id: this.props.match.params.id,
      });

      const get4SquareReport = await ERCCA.API.get4SquareReport(
        {},
        {},
        { id: this.props.match.params.id }
      );

      this._isMounted &&
        this.setState({
          rcca_status: rccaDetail.at(0).rcca_status,
          get4SquareReport: get4SquareReport.get4SquareReport,
        });
    }
  };

  export4SquarePDFWithMethod = () => {
    let element = this.FourSquare.current || document.body;
    savePDF(element, {
      paperSize: 'A4',
      margin: 30,
      landscape: true,
      fileName: `${this.props.match.params.id}_4-Square_${moment().format(
        'DDMMYYYY'
      )}`,
    });
  };
  render() {
    console.log('data', this.state.get4SquareReport);
    return (
      <>
        <PageHeader
          maintitle={this.props.menu.label}
          title={`Manage ${this.props.menu.label}`}
          breadcrumbs={this.props.menu.breadcrumbs}
          {...this.props}
          parentClassName={''}
        />
        <Panel title="eRCCA Form" icon={<FcDocument />}>
          <Stack sx={{ width: '100%' }} spacing={2}>
            <Alert severity="info">
              e-RCCA# {this.props.match.params.id} Detail Form (Status :{' '}
              {this.state?.rcca_status
                ?.toLowerCase()
                .replace(/^(.)|\s(.)/g, function ($1) {
                  return $1.toUpperCase();
                })}
              ){' '}
            </Alert>
          </Stack>
          <br />
          <div>
            <Grid container spacing={2}>
              <Grid item xs={12}>
                <Button
                  icon="pdf"
                  fillMode="solid"
                  themeColor={'base'}
                  onClick={this.export4SquarePDFWithMethod}
                >
                  4-Square
                </Button>
              </Grid>
            </Grid>
            <br />
            <br />
            <div className="border rounded p-2 hidden">
              <PDFExport
                ref={this.pdfExportComponent}
                paperSize="A4"
                margin="1"
                landscape={true}
                scale={0.5}
              >
                <div ref={this.FourSquare}>
                  <SquarePdf
                    get4SquareReport={this.state.get4SquareReport}
                    id={this.props.match.params.id}
                  />
                </div>
              </PDFExport>
            </div>
          </div>
        </Panel>
      </>
    );
  }
}