Notes

import React from "react";
import "./LargeClaims.css";
import { submissionData } from "../../../Shared/Redux/Slicers/SubmissionSlice";
import { useSelector } from 'react-redux'
import NewDataTable from "../../../Shared/Components/NewDataTable";
import Accordion from "../../../Shared/Components/Accordian";
import { useState } from "react";
const LargeClaims = ({ isLargeClaims }) => {
const data = useSelector(submissionData)
const { tableColumns: largeClaimsTableColumns } = data.LargeClaimsTable
const newDataLargeClaim = data.LargeClaimsTable.tableRows;

const { tableColumns: claimantyearColumns } = data.ClaimantData
const claimantyear = data.ClaimantData.tableRows
const additionalFieldsForLargeClaim = data.AdditionalFieldsForLargeClaim

console.log(additionalFieldsForLargeClaim, "nnn")


console.log(newDataLargeClaim, "nnn")
console.log(claimantyear, "nnn")

const dummyData = {
GWP: "$560,166",
AcquisitionExpense: 0.8,
NWP: "$448,133"

};
const [expandedRow, setExpandedRow] = useState(null);
const accordionTitles = ["CY", "PY1", "PY2", "PY3"];


const toggleRow = (index) => {
if (expandedRow === index) {
setExpandedRow(null); // Close the row if it's already expanded
} else {
setExpandedRow(index); // Expand the row
}
};




return (
<>
<div className="top-header-div">
<div className="info-item">
<strong > GWP: </strong>{dummyData.GWP}
</div>
<div className="info-item">
<strong> Acquisition Expense: </strong>{dummyData.AcquisitionExpense}
</div>
<div className="info-item">
<strong > NWP: </strong>{dummyData.NWP}
</div>

</div>

<div className="header-div-table">
<table className="custom-table">
<thead>
<tr>
{/* Add Accordion Column as the first column */}
<th>Accordian</th>
{largeClaimsTableColumns.map((column) => (
<th key={column.controlId}>{column.name}</th>
))}
</tr>
</thead>
<tbody>
{newDataLargeClaim.map((row, rowIndex) => (
<tr key={rowIndex}>
{/* Accordion Column on the Left */}
<td onClick={() => toggleRow(rowIndex)} style={{ cursor: 'pointer' }}>
<Accordion title={accordionTitles[rowIndex % accordionTitles.length]}> {/* Use a fixed title for each row */}
{expandedRow === rowIndex && (
<div>
<ul>
<li><strong>Loss Ratio:</strong> {row.loss_ratio}</li>
<li><strong>Contract Basis:</strong> {row.contract_basis}</li>


<li><strong>Claims Over Spec:</strong> {row.claims_Over_spec}</li>
<li><strong>Of Claimants Over Spec:</strong> {row.of_claimants_over_spec}</li>
</ul>
</div>
)}
</Accordion>
</td>
{/* Other Table Columns */}
{largeClaimsTableColumns.map((column, colIndex) => (
<td key={colIndex}>
{/* Display the data for each cell in the table */}
{row[column.controlId]}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
<div className="average-div"> <h5>Average</h5>
<h5>Expected Claimants over spec
</h5></div>
<div className="h4-div">
<h4>Claimant Year Over Year View
</h4>
</div>
<NewDataTable tableColumns={claimantyearColumns} tableRows={claimantyear} />

</>

);
};
export default LargeClaims;