import React from 'react';
import moment from 'moment';
import { Buffer } from 'buffer';
import './Form.scss';

class SquarePdf extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <>
        <table
          style={{
            borderWidth: '1px',
            borderStyle: 'solid',
            borderColor: '#666666',
            borderCollapse: 'collapse',
            fontFamily: 'Arial, Helvetica, sans-serif',
            padding: '5px',
            width: '100%',
          }}
        >
          <thead>
            <tr>
              <th
                colSpan="2"
                style={{
                  borderWidth: '1px',
                  borderStyle: 'solid',
                  borderColor: '#666666',
                  padding: '5px',
                  background: '#dedede',
                  fontFamily: 'Arial, Helvetica, sans-serif',
                }}
              >
                RCCA | &nbsp; {this.props.id}
              </th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
        <table
          style={{
            borderWidth: '1px',
            borderStyle: 'solid',
            borderColor: '#666666',
            borderCollapse: 'collapse',
            fontFamily: 'Arial, Helvetica, sans-serif',
            padding: '5px',
            width: '100%',
          }}
        >
          <thead></thead>
          <tbody>
            <tr>
              <th
                style={{
                  borderWidth: '1px',
                  borderStyle: 'solid',
                  borderColor: '#666666',
                  padding: '5px',
                  background: '#dedede',
                  fontFamily: 'Arial, Helvetica, sans-serif',
                }}
              >
                Problem Statement
              </th>
              <th
                style={{
                  borderWidth: '1px',
                  borderStyle: 'solid',
                  borderColor: '#666666',
                  padding: '5px',
                  background: '#dedede',
                  fontFamily: 'Arial, Helvetica, sans-serif',
                }}
              >
                Action
              </th>
            </tr>
            <tr>
              <td
                style={{
                  verticalAlign: 'top',
                  padding: '20px',
                  borderWidth: '1px',
                  borderStyle: 'solid',
                  borderColor: '#666666',
                  fontFamily: 'Arial, Helvetica, sans-serif',
                }}
              >
                {' '}
                <b>IS : </b>
                <br />
                {this.props?.getReports?.at(0)?.rccaD1DescProblem?.rddp_act_problem}
                <br />
                <b>Should be : </b>
                <br />
                {this.props?.getReports?.at(0)?.rccaD1DescProblem?.rddp_should_be}
                <br />
                <br />
                {this.props?.getReports?.at(0)?.rccaD1DescProblem?.attachments?.at(0)?.data ? (
                  <img
                    ref={this.container}
                    src={`data:${this.props?.getReports?.at(0)?.rccaD1DescProblem?.attachments?.at(0)?.mime};base64,${Buffer.from(this.props?.getReports?.at(0)?.rccaD1DescProblem?.attachments?.at(0)?.data || '').toString('base64')}`}
                    alt={this.props?.getReports?.at(0)?.rccaD1DescProblem?.attachments?.at(0)?.name}
                    style={{
                      height: '200px',
                      maxWidth: '100%',
                      width: '400px',
                    }}
                  />
                ) : null}
              </td>
              <td
                style={{
                  verticalAlign: 'top',
                  padding: '20px',
                  borderWidth: '1px',
                  borderStyle: 'solid',
                  borderColor: '#666666',
                  fontFamily: 'Arial, Helvetica, sans-serif',
                }}
              >
                <b>Corrective :</b>
                {this.props?.getReports?.at(0)?.rccaD5CorrectActions.map((rccaD5, index) => (
                  <div key={index}>
                    {index + 1} ) {rccaD5?.rca_actions}&nbsp;(<b>PIC : </b>
                    &nbsp;{rccaD5?.rca_pic}; <b>ECD : </b> &nbsp;
                    {moment(rccaD5?.rca_action_date).format('DD-MMM-YY')})
                  </div>
                ))}
                <br />
                <b>Mitigation :</b>
                {this.props?.getReports?.at(0)?.rccaD6RiskMitigations.map((rccaD6, index) => (
                  <div key={index}>
                    {index + 1} ) {rccaD6?.rrm_actions}&nbsp;(<b>PIC : </b>
                    &nbsp;{rccaD6?.rrm_pic}; <b>ECD : </b>&nbsp;
                    {moment(rccaD6?.rrm_action_date).format('DD-MMM-YY')})
                  </div>
                ))}
              </td>
            </tr>
            <tr>
              <th
                style={{
                  borderWidth: '1px',
                  borderStyle: 'solid',
                  borderColor: '#666666',
                  padding: '5px',
                  background: '#dedede',
                  fontFamily: 'Arial, Helvetica, sans-serif',
                }}
              >
                Cause
              </th>
              <th
                style={{
                  borderWidth: '1px',
                  borderStyle: 'solid',
                  borderColor: '#666666',
                  padding: '5px',
                  background: '#dedede',
                  fontFamily: 'Arial, Helvetica, sans-serif',
                }}
              >
                Verification
              </th>
            </tr>
            <tr>
              <td
                style={{
                  verticalAlign: 'top',
                  padding: '20px',
                  borderWidth: '1px',
                  borderStyle: 'solid',
                  borderColor: '#666666',
                  fontFamily: 'Arial, Helvetica, sans-serif',
                }}
              >
                <b>Direct Root Cause :</b>
                {this.props?.getReports?.at(0)?.rccaD4ProblemRootCauses.map((rccaD4, index) =>
                  rccaD4?.rrc_rootcause_type == 'Direct' ? (
                    <div key={index}>
                      {index + 1} ) {rccaD4?.rrc_rootcause}
                    </div>
                  ) : (
                    ''
                  )
                )}
                <br />
                <b>Escapee Root Cause :</b>
                {this.props?.getReports?.at(0)?.rccaD4ProblemRootCauses.map((rccaD4, index) =>
                  rccaD4?.rrc_rootcause_type == 'Escapee' ? (
                    <div key={index}>
                      {index + 1} ) {rccaD4?.rrc_rootcause}
                    </div>
                  ) : (
                    ''
                  )
                )}
                <br />
                <br />
                <b>Systemic Root Cause :</b>
                <br />
                {this.props?.getReports?.at(0)?.rccaD4ProblemRootCauses.map((rccaD4, index) =>
                  rccaD4?.rrc_rootcause_type == 'Systemic' ? (
                    <div key={index}>
                      {index + 1} ) {rccaD4?.rrc_rootcause}
                    </div>
                  ) : (
                    ''
                  )
                )}
              </td>
              <td
                style={{
                  verticalAlign: 'top',
                  padding: '20px',
                  borderWidth: '1px',
                  borderStyle: 'solid',
                  borderColor: '#666666',
                  fontFamily: 'Arial, Helvetica, sans-serif',
                }}
              >
                {this.props?.getReports?.at(0)?.rccaD7MonitorPlans.map((rccaD7, index) => (
                  <div key={index}>
                    {index + 1} ) {rccaD7?.rmp_monitoring_plan_action} <br />
                    <b>PIC : </b>&nbsp;
                    {this.props?.getReports?.at(0)?.rcca_mrb_chairman}
                    <br />
                    <b>ECD : </b>&nbsp;
                    {moment(rccaD7?.rmp_mrb_validation_date).format('DD-MMM-YY')}
                  </div>
                ))}
              </td>
            </tr>
          </tbody>
        </table>
      </>
    );
  }
}

export default SquarePdf;