import React from 'react';
import ReactDomServer from 'react-dom/server';
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 './EightDReport';
import content from './content';
import { Editor, EditorTools } from '@progress/kendo-react-editor';

//import { SampleFileBase64 } from './SampleFileBase64';

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

const { Print, Pdf } = EditorTools;

import { Dialog, DialogActionsBar } from '@progress/kendo-react-dialogs';
export default class Form extends React.PureComponent {
  constructor(props) {
    super(props);
    this._isMounted = false;
    this.state = { visible: false };
  }

  componentDidMount() {
    this._isMounted = true;
    helpers.debounce(`Form-initialize`, async () => {
      this.initialize();
    });
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

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

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

  toggleDialog = async (buttonName) => {
    let getReports = await ERCCA.API.getReport({}, {}, { id: this.props.match.params.id });
    let content;
    if (buttonName === 'EightDReport') {
      content = <EightDReport getReports={getReports} id={this.props.match.params.id} />;
    } else if (buttonName === 'SquarePdf') {
      content = <SquarePdf getReports={getReports} id={this.props.match.params.id} />;
    }
    this.setState({
      visible: !this.state.visible,
      getReports: getReports,
      content: ReactDomServer.renderToStaticMarkup(content),
    });
  };

  toggleDialogClose = () => {
    this.setState({
      visible: !this.state.visible,
    });
  };

  render() {
    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={'primary'} onClick={() => this.toggleDialog('EightDReport')} className="button-margin-10px">
                  8D Reports
                </Button>
                <Button icon="pdf" fillMode="solid" themeColor={'base'} onClick={() => this.toggleDialog('SquarePdf')}>
                  4-Square
                </Button>
              </Grid>
            </Grid>
            <br />
            <br />
          </div>
        </Panel>

        {this.state.visible && (
          <Dialog title={'Report'} onClose={this.toggleDialogClose} width={1300} height={550}>
            {this.state.getReports?.length && (
              <Editor
                tools={[[Pdf, Print]]}
                contentStyle={{
                  height: 300,
                }}
                defaultContent={this.state.content}
              />
            )}
            <DialogActionsBar>
              <button className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" onClick={this.toggleDialogClose}>
                Close
              </button>
            </DialogActionsBar>
          </Dialog>
        )}
      </>
    );
  }
}