import { Flex } from 'antd'
import PropTypes from 'prop-types'
import ObjectProperty from './ObjectProperty'
import { getCategoryValueKey } from './viewModeUtils'

const ObjectKanbanHeader = ({
  categoryValues,
  categoryProperty,
  categoryPropertyDef,
  trackRef
}) => {
  return (
    <div className='objectKanbanHeader'>
      <div className='objectKanbanHeaderTrack' ref={trackRef}>
        <Flex gap='middle' className='objectKanbanHeaderRow'>
          {categoryValues.map((categoryValue) => {
            const columnKey = getCategoryValueKey(categoryValue)
            return (
              <div key={columnKey} className='objectKanbanHeaderCell'>
                {categoryPropertyDef ? (
                  <ObjectProperty
                    {...categoryPropertyDef}
                    value={categoryValue}
                    objectData={{ [categoryProperty]: categoryValue }}
                    name={categoryProperty}
                  />
                ) : null}
              </div>
            )
          })}
        </Flex>
      </div>
    </div>
  )
}

ObjectKanbanHeader.displayName = 'ObjectKanbanHeader'

ObjectKanbanHeader.propTypes = {
  categoryValues: PropTypes.array.isRequired,
  categoryProperty: PropTypes.string.isRequired,
  categoryPropertyDef: PropTypes.object,
  trackRef: PropTypes.object
}

export default ObjectKanbanHeader