import { createComponent, Shade } from '@furystack/shades'
import { SegmentedControl } from '../../button-group.js'
import { cssVariableTheme } from '../../../services/css-variable-theme.js'
import type { FilterableFindOptions } from '../data-grid.js'

type BooleanFilterValue = 'true' | 'false' | 'any'

export const BooleanFilter = Shade<{
  field: string
  findOptions: FilterableFindOptions
  onFindOptionsChange: (options: FilterableFindOptions) => void
  onClose: () => void
}>({
  customElementName: 'data-grid-boolean-filter',
  css: { fontFamily: cssVariableTheme.typography.fontFamily },
  render: ({ props }) => {
    const { findOptions } = props

    const currentFilter = findOptions.filter?.[props.field] as { $eq?: boolean } | undefined
    const currentValue: BooleanFilterValue =
      currentFilter?.$eq === true ? 'true' : currentFilter?.$eq === false ? 'false' : 'any'

    const applyFilter = (value: BooleanFilterValue) => {
      const filter = { ...findOptions.filter }
      if (value === 'any') {
        delete filter[props.field]
      } else {
        filter[props.field] = { $eq: value === 'true' }
      }
      props.onFindOptionsChange({ ...findOptions, filter, skip: 0 })
      props.onClose()
    }

    return (
      <SegmentedControl
        size="small"
        value={currentValue}
        onValueChange={(v) => applyFilter(v as BooleanFilterValue)}
        options={[
          { value: 'true', label: 'True' },
          { value: 'false', label: 'False' },
          { value: 'any', label: 'Any' },
        ]}
      />
    )
  },
})