import { Select } from 'antd';
import classnames from "classnames"
import FloatLabel from "./FloatLabel/index";
import React, { useState } from "react";

export const DropDowns = ({ options, onChangeFunction, 
  isOnchanges, 
  className, 
  defaultValue,
  searchKeys = ["label"],
   disabled, ...props }) => {
  const [inpValue, setInputValue] = useState('')
  const [isOnchange, setisOnchange] = useState(isOnchanges)
  const changeStatus = async () => {
    await setisOnchange(true)

  }

  const {
    field,
    onChange,
    label,
    onBlur,
    forwardedRef,
    required,
    valueData,
    labelChange,
    ...rest
  } = props;

  return (

    <FloatLabel
      label={label}
      value={inpValue}
      isOnChange={valueData != null ? true : isOnchange}
    >

      <Select
        showSearch
        style={{
          width: 250

        }}
        defaultValue={defaultValue ? defaultValue : null}
        optionFilterProp="children"
        filterOption={
          !labelChange
            ? (input, option) => {
                return searchKeys.some((key) =>
                  (option?.[key] ?? "")
                    .toString()
                    .toLowerCase()
                    .includes(input.toLowerCase())
                );
              }
            : null
        }
        filterSort={!labelChange ? (optionA, optionB) =>
          (optionA?.label ?? '')?.toLowerCase()?.localeCompare((optionB?.label ?? '').toLowerCase()) : null
        }
        value={valueData}
        onChange={(e) => onChangeFunction(e)}
        onSelect={(e) => changeStatus(e)}
        options={options}
        className={classnames(` ${className}`)}
        disabled={disabled ? true : false}
      />
    </FloatLabel>

  )
};