import Filters from '@/components/Filters'
import { Checkbox } from '@blueprintjs/core'
import type { FC } from 'react'
import { type Filter, type UserColumn } from '../utils'

const Columns: FC<Filter<UserColumn[]>> = ({ selected, setSelected }) => {
  const filters = (
    <>
      {selected.map(currentColumn => (
        <Checkbox
          key={currentColumn.name}
          label={currentColumn.name}
          checked={currentColumn.display}
          onChange={() =>
            setSelected(prev =>
              prev.map(column =>
                column.name === currentColumn.name
                  ? { ...column, display: !column.display }
                  : column
              )
            )
          }
        />
      ))}
    </>
  )

  return (
    <Filters
      fill
      heading='Select columns'
      noWrap
      content={filters}
      icon='column-layout'
      position='left'
      onSelectAll={() =>
        setSelected(prev => prev.map(column => ({ ...column, display: true })))
      }
      onDeselectAll={() =>
        setSelected(prev => prev.map(column => ({ ...column, display: false })))
      }
    />
  )
}

export default Columns
