import React, { Fragment, useState } from 'react';
import { Field as FinalField } from 'react-final-form';
import { Picker } from './index';
// import { IPickerProps } from "bondsports-utils/types";

export interface IOption {
  label: string;
  value: string | number;
}
export interface IPickerProps {
  label: string;
  info?: string;
  sizer: 'M' | 'S';
  options: IOption[];
  selected?: (string | number)[];
  setSelected?: (v: any) => void;
}
export interface IFormProps extends IPickerProps {
  name: string;
  onClear?: (val: string) => void;
  required?: boolean;
  onSelecting: (val1: string, val2: string | (string | number)[]) => void;
}
export const FormPicker = ({
  onClear = (val: string) => {},
  ...props
}: IFormProps & React.InputHTMLAttributes<HTMLInputElement>) => {
  const clear = () => onClear(props.name);
  //   const [value, setValue] = useState<(string | number)[]>([]);
  const onSelect = (val: (string | number)[]) => {
    // setValue(val);
    props.onSelecting(props.name, val);
  };
  return (
    <FinalField
      name={props.name}
      validate={(val) => {
        if (props.required) {
          if (!val) {
            let errors = {};
            errors[props.name] = 'required';
            return errors;
          }
        }
        return undefined;
      }}
      displayEmpty
    >
      {({ input, meta }) => {
        const newProps = { ...props };
        return (
          <Fragment>
            <Picker {...props} setSelected={onSelect} selected={input.value} />
            {/* <Input type={type} {...input} {...newProps} error={meta.error && meta.error[props.name]} clear={clear} /> */}
          </Fragment>
        );
      }}
    </FinalField>
  );
};