import {
  toPlateMapEditorState,
  toWellPlateWells,
} from './adapters'
import {
  activePlateFromState,
  legendItemsFromPlateState,
  racksFromPlateState,
  sampleColorsFromPlateState,
} from './componentPlateHelpers'
import { propsBinding } from './componentPropsFactory'
import type { BioTemplateComponentPropsBinding } from './componentBindings'
import type { PlateMapTemplate } from './types'

export function plateMapProps(template: PlateMapTemplate): BioTemplateComponentPropsBinding[] {
  const state = toPlateMapEditorState(template)
  const plate = activePlateFromState(state)
  return [
    propsBinding('plate-map', 'PlateEditor', {
      modelValue: racksFromPlateState(state),
      activeRackId: plate.id,
      groups: state.samples,
      formats: [plate.format],
      wellFields: false,
    }),
    propsBinding('plate-map', 'WellPlate', {
      format: plate.format,
      wells: toWellPlateWells(template),
      sampleColors: sampleColorsFromPlateState(state),
      legendItems: legendItemsFromPlateState(state),
      showLegend: true,
    }),
  ]
}