import React, { forwardRef, InputHTMLAttributes } from 'react'
import PropTypes from 'prop-types'

import type { Option } from './types'

export interface CMultiSelectNativeSelectProps
  extends Omit<InputHTMLAttributes<HTMLSelectElement>, 'options'> {
  options?: Option[]
  value?: string | number | string[]
}

const createNativeOptions = (options: Option[]) =>
  options &&
  options.map((option: Option, index: number) =>
    option.options ? (
      <optgroup label={option.label} key={index}>
        {createNativeOptions(option.options)}
      </optgroup>
    ) : (
      <option value={option.value} key={index} disabled={option.disabled}>
        {option.label}
      </option>
    ),
  )

export const CMultiSelectNativeSelect = forwardRef<
  HTMLSelectElement,
  CMultiSelectNativeSelectProps
>(({ id, name, options, ...rest }, ref) => {
  return (
    <select
      id={id}
      {...(id && !name && { name: `${id}-multi-select` })} // TODO: remove in v6
      {...(name && { name: name })}
      tabIndex={-1}
      style={{ display: 'none' }}
      {...rest}
      ref={ref}
    >
      {options && createNativeOptions(options)}
    </select>
  )
})

CMultiSelectNativeSelect.propTypes = {
  id: PropTypes.string,
  name: PropTypes.string,
  options: PropTypes.array,
  value: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
    PropTypes.arrayOf(PropTypes.string.isRequired),
  ]),
}

CMultiSelectNativeSelect.displayName = 'CMultiSelectNativeSelect'