import React, { FC, HTMLAttributes } from 'react';
import PropTypes from 'prop-types';

interface ISelectOptionProps extends HTMLAttributes<HTMLOptionElement> {
	children: string;
	value?: string | number;
	disabled?: boolean;
	ariaLabelledby?: string | null;
}
const SelectOption: FC<ISelectOptionProps> = ({ children, value, disabled, ariaLabelledby, ...props }) => {
	return (
		<option
			value={value}
			disabled={disabled}
			aria-labelledby={ariaLabelledby || children}
			// eslint-disable-next-line react/jsx-props-no-spreading
			{...props}>
			{children}
		</option>
	);
};
SelectOption.propTypes = {
	children: PropTypes.string.isRequired,
	value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
	disabled: PropTypes.bool,
	ariaLabelledby: PropTypes.string,
};
SelectOption.defaultProps = {
	disabled: false,
	ariaLabelledby: null,
	value: undefined,
};

export interface ISelectOptionsProps {
	list: [];
  key: string | number;
  label: string | number;
  value: string | number;
}
// @ts-ignore
export const SelectOptions: FC<ISelectOptionsProps> = ({ list, keyprop, label, value }) => {
	return list?.map((item: object) => (
		// eslint-disable-next-line react/jsx-props-no-spreading
		<SelectOption key={item[keyprop as keyof typeof item]} value={item[value as keyof typeof item]} {...item}>
			{item[label as keyof typeof item]}
		</SelectOption>
	));
};
SelectOptions.propTypes = {
	// @ts-ignore
	list: PropTypes.arrayOf(
		PropTypes.shape({
			value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
			text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
			label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
		}),
	).isRequired,
};

export default SelectOption;