btrc-hub/frontend/src/components/counts/CountsAdditionalConditions.tsx

import { useEffect, useState } from 'react'

import DateTimeField from '@/components/common/DateTimeField'
import { Button } from '@/components/ui/button'
import { countsEventTypes, countsFieldLabel, countsFilterFields,
	 useCountsDefinition }
    from '@/lib/countsDefinitions'
import useDialogue from '@/lib/dialogues/useDialogue'
import { inputClass } from '@/lib/utils'
import { useUITranslation } from '@/lib/useUITranslation'

import { readCountState, encodeCountState } from '@/lib/queryState'

import type { DialogueFormControls } from '@/lib/dialogues/useDialogue'
import type { CountsCondition, CountsDefinition } from '@/lib/countsDefinitions'


const ConditionEditor = (
    { definition, initial, controls, save }: {
	definition: CountsDefinition; initial?: CountsCondition
	controls: DialogueFormControls
	save: (condition: CountsCondition) => void },
) => {
  const { label, message } = useUITranslation ('counts')
  const fields = definition.filterFields ?? definition.fields
  const fieldName = (key: string) => (fields.find (item => item.key === key)?.labels
      ?? [countsFieldLabel (key)]).map (key => message (key).text).join (' › ')
  const [condition, setCondition] = useState<CountsCondition> (() => {
    const next = { ...initial, field: initial?.field ?? 'resource_id',
	operator: initial?.operator ?? 'eq' }
    if (next.operator !== 'range') delete next.end
    return next
  })
  const { field, operator } = condition
  const operators = fields.find (item => item.key === field)?.operators ?? []
  useEffect (() => {
    controls.setActions ([{ label: label (initial == null ? 'add' : 'shared:actions.edit'),
	onSelect: () => save (condition) }])
  }, [controls, condition, initial, label, save])
  return <div className="space-y-2">
    <select value={field} aria-label={message ('field').text} className={inputClass ()}
	onChange={event => {
	  const field = event.target.value
	  const operator = fields.find (item => item.key === field)?.operators[0]
	  if (operator != null) setCondition ({ field, operator })
	}}>
      {fields.filter (field => field.operators.length > 0).map (field => (
	  <option key={field.key} value={field.key}>{fieldName (field.key)}</option>))}
    </select>
    <select value={operator} aria-label={message ('operator').text} className={inputClass ()}
	onChange={event => setCondition (previous => {
	  const operator = event.target.value
	  const next = { ...previous, operator }
	  if (operator !== 'range') delete next.end
	  if ((operator === 'like') !== (previous.operator === 'like')) delete next.value
	  return next
	})}>
      {operators.map (key => <option key={key} value={key}>
        {message (`operators.${key}`).text}</option>)}
    </select>
  </div>
}


const CountsAdditionalConditions = ({ params, update }: {
    params: URLSearchParams
    update: (key: string, value: string) => void },
) => {
  const { label, message } = useUITranslation ('counts')
  const definition = useCountsDefinition ()
  const dialogue = useDialogue ()
  const conditions = readCountState<CountsCondition[]> (params, 'conditions', [])
  const metadata = definition.filterFields ?? definition.fields
  const fields = metadata.filter (field => field.operators.length > 0)
  const fieldName = (key: string) => (metadata.find (item => item.key === key)?.labels
      ?? [countsFieldLabel (key)]).map (key => message (key).text).join (' › ')
  const write = (next: CountsCondition[]) => update (
      'conditions', encodeCountState ('conditions', next))
  const replace = (index: number, condition: CountsCondition) => write (
      conditions.map ((item, position) => position === index ? condition : item))
  const patch = (index: number, change: Partial<CountsCondition>) =>
      replace (index, { ...conditions[index], ...change })
  const edit = (index?: number) => {
    const initial = index == null ? undefined : conditions[index]
    const save = (condition: CountsCondition) => {
      if (index == null) write ([...conditions, condition])
      else replace (index, condition)
    }
    void dialogue.form ({ title: label ('additionalConditions'), footerLayout: 'inline',
	body: controls => <ConditionEditor definition={definition}
	    initial={initial} controls={controls} save={save}/> })
  }
  const valueInput = (condition: CountsCondition, index: number, key: 'value' | 'end') => {
    const type = countsFilterFields (definition)[condition.field]
    const aria = message (key === 'end' ? 'through'
	: (condition.operator === 'range' ? 'from' : 'value'))
    if (type === 'boolean' || condition.field === 'event_type')
    {
      const options: string[] = type === 'boolean' ? ['true', 'false'] : [...countsEventTypes]
      const namespace = type === 'boolean' ? 'truthValues' : 'events'
      return <select value={condition[key] ?? ''} disabled={condition.blank}
	  className={inputClass (false, 'h-7 w-36 min-w-0 max-w-full py-1')}
	  aria-label={aria.text}
	  lang={aria.language}
	  onChange={event => patch (index, { [key]: event.target.value })}>
	<option value=""/>
	{options.map (value => <option key={value} value={value}
	    lang={message (`${namespace}.${value}`).language}>
	  {message (`${namespace}.${value}`).text}</option>)}
      </select>
    }
    if (type === 'datetime')
      return <DateTimeField precision="second" className="h-7 w-48 min-w-0 max-w-full py-1"
	  value={condition[key] ?? ''} disabled={condition.blank}
	  aria-label={aria.text} lang={aria.language}
	  onChange={value => patch (index, { [key]: value ?? '' })}/>
    return <input value={condition[key] ?? ''} disabled={condition.blank}
	type={(type === 'integer' || type === 'interval') ? 'number' : 'text'}
	className={inputClass (false, 'h-7 w-36 min-w-0 max-w-full py-1')}
	aria-label={aria.text} lang={aria.language}
	onChange={event => patch (index, { [key]: event.target.value })}/>
  }
  return <fieldset className="min-w-0 space-y-1">
    <legend className="flex items-center gap-2">{label ('additionalConditions')}
      <Button type="button" variant="outline" size="sm" disabled={fields.length === 0}
	  onClick={() => edit ()}>{label ('add')}</Button></legend>
    {conditions.map ((condition, index) => (
	<div key={index} className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1
	    border-b border-slate-200 py-1 dark:border-slate-700">
	  <Button type="button" variant="ghost" size="sm" onClick={() => edit (index)}
	      aria-label={`${fieldName (condition.field)} ${message (
		  `operators.${condition.operator}`).text}`}
	      className="h-7 min-w-0 max-w-full justify-start gap-2 whitespace-normal px-1 text-left">
	    <span className="min-w-0 break-words">{fieldName (condition.field)}</span>
	    {condition.operator !== 'range' && <span aria-hidden="true" className="shrink-0">
	      {label (`operatorSymbols.${condition.operator}`)}</span>}
	  </Button>
	  <div className="inline-flex min-w-0 max-w-full items-center gap-1">
	    {valueInput (condition, index, 'value')}
	    {condition.operator === 'range' && <>
	      <span aria-hidden="true" className="shrink-0">{label ('operatorSymbols.range')}</span>
	      {valueInput (condition, index, 'end')}
	    </>}
	  </div>
	  <div className="inline-flex shrink-0 items-center gap-1">
	    <label className="inline-flex items-center gap-1 text-sm">
	      <input type="checkbox" checked={condition.blank ?? false}
		  onChange={event => patch (index, { blank: event.target.checked })}/>
	      {label ('blank')}</label>
	    <Button type="button" variant="ghost" size="sm" className="h-7 px-1"
		aria-label={message ('remove').text}
		onClick={() => write (conditions.filter ((_, position) => index !== position))}>
	      ×</Button>
	  </div>
	</div>))}
  </fieldset>
}


export default CountsAdditionalConditions