import type { SelectField } from "@payloadcms/plugin-form-builder/types";
import type { Control, FieldErrorsImpl, FieldValues } from "react-hook-form";

import React from "react";
import { Controller } from "react-hook-form";

import { Error } from "../Error";
import { Width } from "../Width";

export const Select: React.FC<
  {
    control: Control<FieldValues, any>;
    errors: Partial<
      FieldErrorsImpl<{
        [x: string]: any;
      }>
    >;
  } & SelectField
> = ({ name, control, errors, label, options, required, width }) => {
  return (
    <Width width={width}>
      <div className="form-wrap relative">
        <Controller
          control={control}
          defaultValue=""
          name={name}
          render={({ field: { onChange, value } }) => (
            <>
              {/* <ReactSelect
                classNamePrefix="rs"
                inputId={name}
                instanceId={name}
                onChange={(val) => onChange(val ? val.value : "")}
                options={options}
                value={options.find((s) => s.value === value)}
              /> */}
              <select className="form-input select-filter" name="interest" onChange={onChange} value={value}>
                <option value="">{label}</option>
                {options.map((opt, idx) => (
                  <option key={idx} value={opt.value}>
                    {opt.label}
                  </option>
                ))}
              </select>
              <span className="absolute right-2 top-3 fa fa-caret-down text-black"></span>
            </>
          )}
          rules={{ required }}
        />
        {required && errors[name] && <Error />}
      </div>
    </Width>
  );
};
