import { memo, useMemo } from 'react';
import type { FindingRecord } from '../../domain/finding';
import { highlightText } from '../../components/HighlightText/highlight-text';
import { RelatedFindingRing, useRelatedFindings } from '../related-findings/RelatedFindings';

/** Building the complete text belongs exclusively to the Raw Data view. */
export const RawDataView = memo(function RawDataView({ records, raw, filtered, search }: {
  records: FindingRecord[]; raw: string; filtered: boolean; search: string;
}) {
  const related = useRelatedFindings();
  const text = useMemo(() => filtered
    ? records.map(record => [`# Record ${record.index + 1}`,
      ...record.fields.filter(field => field.value).map(field => `${field.label}: ${field.value}`)].join('\n')).join('\n\n')
    : raw, [filtered, raw, records]);
  return <div className="viewer-scroll" data-group-scroll="work-raw">
    {!filtered && related?.groups.size ? <div className="raw-related-findings" aria-label="Related findings">
      {records.filter(record => related.groups.has(record.id)).map(record => <div className="related-raw-record" key={record.id}><span>{record.title}</span><RelatedFindingRing record={record}/></div>)}
    </div> : null}
    {filtered && related?.groups.size ? records.map(record => <div className="related-raw-record" key={record.id}>
      <RelatedFindingRing record={record}/>
      <pre className="raw-view">{highlightText([`# Record ${record.index + 1}`, ...record.fields.filter(field => field.value).map(field => `${field.label}: ${field.value}`)].join('\n'), search)}</pre>
    </div>) : <pre className="raw-view">{highlightText(text, search)}</pre>}
  </div>;
});