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

import React, { 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[];
  hide: () => void;
  onSave: (data: { reportName: string; dataSource: string | null; series: string | null }) => void;
  onCancel: () => void;
};

function ReportDialog({ dataSources, hide, onSave, onCancel }: ReportDialogProps) {
  const { servicesManager } = useSystem();
  const [selectedDataSource, setSelectedDataSource] = useState<string | null>(
    dataSources?.[0]?.value ?? null
  );
  const [selectedSeries, setSelectedSeries] = useState<string | null>(null);
  const [reportName, setReportName] = useState('');

  const { displaySetService } = servicesManager.services;

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

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

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

  const handleSave = () => {
    onSave({
      reportName,
      dataSource: selectedDataSource,
      series: selectedSeries,
    });
    hide();
  };

  const handleCancel = () => {
    onCancel();
    hide();
  };

  const showDataSourceSelect = dataSources?.length > 1;

  return (
    <div className="text-foreground mt-2 flex min-w-[400px] max-w-md flex-col gap-4">
      <div className="flex flex-col gap-3">
        <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={showDataSourceSelect ? 'flex gap-4' : ''}>
          <div className="mt-4 w-full">
            <InputDialog
              value={reportName}
              onChange={setReportName}
              submitOnEnter
            >
              <InputDialog.Field>
                <InputDialog.Input
                  placeholder="Report name"
                  disabled={!!selectedSeries}
                />
              </InputDialog.Field>
            </InputDialog>
          </div>
        </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,
};