ohif-viewer/extensions/default/src/customizations/reportDialogCustomization.tsx

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { InputDialog } from '@ohif/ui-next';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@ohif/ui-next';
import { useSystem } from '@ohif/core';

type DataSource = {
  value: string;
  label: string;
  placeHolder: string;
};

type ReportDialogProps = {
  dataSources: DataSource[];
  modality?: string;
  predecessorImageId?: string;
  hide: () => void;
  onSave: (data: {
    reportName: string;
    dataSource: string | null;
    series: string | null;
    priorSeriesNumber: number;
  }) => void;
  onCancel: () => void;
};

function ReportDialog({
  dataSources,
  modality = 'SR',
  predecessorImageId,
  minSeriesNumber = 3000,
  hide,
  onSave,
  onCancel,
}: ReportDialogProps) {
  const { servicesManager } = useSystem();
  const [selectedDataSource, setSelectedDataSource] = useState<string | null>(
    dataSources?.[0]?.value ?? null
  );
  const { displaySetService } = servicesManager.services;

  const [selectedSeries, setSelectedSeries] = useState<string | null>(predecessorImageId || null);
  const [reportName, setReportName] = useState('');

  const seriesOptions = useMemo(() => {
    const displaySetsMap = displaySetService.getDisplaySetCache();
    const displaySets = Array.from(displaySetsMap.values());
    const options = displaySets
      .filter(ds => ds.Modality === modality)
      .map(ds => ({
        value: ds.predecessorImageId || ds.SeriesInstanceUID,
        seriesNumber: isFinite(ds.SeriesNumber) ? ds.SeriesNumber : minSeriesNumber,
        description: ds.SeriesDescription,
        label: `${ds.SeriesDescription} ${ds.SeriesDate}/${ds.SeriesTime} ${ds.SeriesNumber}`,
      }));

    return [
      {
        value: null,
        description: null,
        seriesNumber: minSeriesNumber,
        label: 'Create new series',
      },
      ...options,
    ];
  }, [displaySetService, modality]);

  useEffect(() => {
    const seriesOption = seriesOptions.find(s => s.value === selectedSeries);
    const newReportName =
      selectedSeries && seriesOption?.description ? seriesOption.description : '';
    setReportName(newReportName);
  }, [selectedSeries, seriesOptions]);

  const handleSave = useCallback(() => {
    onSave({
      reportName,
      dataSource: selectedDataSource,
      priorSeriesNumber: Math.max(...seriesOptions.map(it => it.seriesNumber)),
      series: selectedSeries,
    });
    hide();
  }, [selectedDataSource, selectedSeries, reportName, hide, onSave]);

  const handleCancel = useCallback(() => {
    onCancel();
    hide();
  }, [onCancel, hide]);

  const showDataSourceSelect = dataSources?.length > 1;

  return (
    <div className="text-foreground flex min-w-[400px] max-w-md flex-col">
      <div className="flex flex-col gap-4">
        <div className="flex gap-4">
          {showDataSourceSelect && (
            <>
              <div className="mt-1 w-1/2">
                <div className="mb-1 pl-1 text-base">Data source</div>
                <Select
                  value={selectedDataSource}
                  onValueChange={setSelectedDataSource}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Select a data source" />
                  </SelectTrigger>
                  <SelectContent>
                    {dataSources.map(source => (
                      <SelectItem
                        key={source.value}
                        value={source.value}
                      >
                        {source.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className={showDataSourceSelect ? 'mt-1 w-1/2' : 'mt-1 w-full'}>
                <div className="mb-1 pl-1 text-base">Series</div>
                <Select
                  value={selectedSeries}
                  onValueChange={setSelectedSeries}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Select a series" />
                  </SelectTrigger>
                  <SelectContent>
                    {seriesOptions.map(series => (
                      <SelectItem
                        key={series.value}
                        value={series.value}
                      >
                        {series.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </>
          )}
        </div>
        <div className="flex items-end gap-4">
          {!showDataSourceSelect && (
            <div className="w-1/3">
              <div className="mb-1 pl-1 text-base">Series</div>
              <Select
                value={selectedSeries}
                onValueChange={setSelectedSeries}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select a series" />
                </SelectTrigger>
                <SelectContent>
                  {seriesOptions.map(series => (
                    <SelectItem
                      key={series.value}
                      value={series.value}
                    >
                      {series.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          )}
          <InputDialog
            value={reportName}
            onChange={setReportName}
            submitOnEnter
            className="flex-1"
          >
            <InputDialog.Field className="mb-0">
              <InputDialog.Input
                placeholder="Report name"
                disabled={!!selectedSeries}
              />
            </InputDialog.Field>
          </InputDialog>
        </div>

        <div className="flex justify-end gap-2">
          <InputDialog>
            <InputDialog.Actions>
              <InputDialog.ActionsSecondary onClick={handleCancel}>
                Cancel
              </InputDialog.ActionsSecondary>
              <InputDialog.ActionsPrimary onClick={handleSave}>Save</InputDialog.ActionsPrimary>
            </InputDialog.Actions>
          </InputDialog>
        </div>
      </div>
    </div>
  );
}

export { ReportDialog };
export default {
  'ohif.createReportDialog': ReportDialog,
};