import * as React from 'react';
import { Colors } from '../../../../../models/colors';
import { Query } from '../../../../../models/query';
import { dropdownWrapper } from './dropdownList.style';
import OptionsWithCategory from './inner-comps/options-with-category/OptionsWithCategory';
import OptionsWithoutCategory from './inner-comps/options-without-category/OptionsWithoutCategory';
import Input from './inner-comps/input/Input';
import NoResults from './inner-comps/no-results/NoResults';

interface dropdownListProps {
	options?: Array<{ label: string; id: string }>;
	optionsWithCategories?: Array<{
		category: string;
		options: Array<{ label: string; id: string }>;
	}>;
	onOptionClick?: (option: { label: string; id: string }) => void;
	handleKeyDown?: (
		value: string,
		e: React.KeyboardEvent,
		option: { label: string; id: string }
	) => void;
	palette?: Colors;
	query?: Query;
	close?: () => void;
	readOnly?: boolean;
	name?: string;
	type?: string;
	value?: string;
	maxlength?: number;
	placeholder?: string;
	noResults?: string;
	onChange?: (name: string, value: string, e?: React.ChangeEvent<HTMLInputElement>) => void;
	onKeyDown?: (value: string, e: React.KeyboardEvent) => void;
	isDropdown?: boolean;
	translator?: Function;
}

const DropdownList = React.forwardRef(
	(props: dropdownListProps, ref: React.Ref<HTMLUListElement>) => {
		return (
			<div className={dropdownWrapper(props.palette)}>
				{props.query === Query.small && (
					<Input
						palette={props.palette}
						close={props.close}
						readOnly={props.readOnly}
						name={props.name}
						type={props.type}
						value={props.value}
						maxlength={props.maxlength}
						placeholder={props.placeholder}
						onChange={props.onChange}
						onKeyDown={props.onKeyDown}
						isDropdown={props.isDropdown}
					/>
				)}
				{props.optionsWithCategories && props.optionsWithCategories.length ? (
					<OptionsWithCategory
						options={props.optionsWithCategories}
						handleKeyDown={props.handleKeyDown}
						isDropdown={props.isDropdown}
						onOptionClick={props.onOptionClick}
						palette={props.palette}
						ref={ref}
					/>
				) : props.options && props.options.length ? (
					<OptionsWithoutCategory
						options={props.options}
						handleKeyDown={props.handleKeyDown}
						isDropdown={props.isDropdown}
						onOptionClick={props.onOptionClick}
						palette={props.palette}
						query={props.query}
						ref={ref}
					/>
				) : props.query === Query.small ? (
					<NoResults
						palette={props.palette}
						value={props.value}
						noResults={props.noResults}
						placeholder={props.placeholder}
					/>
				) : null}
			</div>
		);
	}
);

export default DropdownList;