// @TODO please move to UIKit

import { ErrorMessage } from '@hookform/error-message'
import { Input, InputWrapperProps } from '@tidbcloud/uikit'
import { mergeStylesList } from '@tidbcloud/uikit/utils'
import { RegisterOptions, useFormContext, Controller } from 'react-hook-form'

import { TreeSelect, TreeSelectProps } from 'dbaas/screens/OrgSettings/features/Billing/components/TreeSelect'

export interface FormTreeSelectProps extends Omit<TreeSelectProps, 'value' | 'onChange'> {
  label?: InputWrapperProps['label']
  withAsterisk?: InputWrapperProps['withAsterisk']
  wrapperProps?: Omit<InputWrapperProps, 'children'>
  name: string
  rules?: RegisterOptions
  onChange?: (val: string[]) => void
}

export const FormTreeSelect: React.FC<React.PropsWithChildren<FormTreeSelectProps>> = ({
  name,
  label,
  withAsterisk,
  wrapperProps,
  rules,
  options,
  onChange: onSelect,
  ...restProps
}) => {
  const {
    control,

    formState,
    getFieldState
  } = useFormContext()
  const { error } = getFieldState(name, formState)
  return (
    <Controller
      name={name}
      control={control}
      rules={rules}
      render={({ field: { onChange, value } }) => {
        return (
          <Input.Wrapper
            error={error ? <ErrorMessage errors={error} name={name} /> : undefined}
            label={label}
            withAsterisk={withAsterisk}
            {...wrapperProps}
            styles={mergeStylesList([
              () => ({
                label: {
                  marginBottom: 8
                },
                error: {
                  marginTop: 8
                }
              }),
              wrapperProps?.styles || {}
            ])}
          >
            <TreeSelect
              value={value}
              options={options}
              onChange={(val) => {
                onChange(val)
                onSelect?.(val)
              }}
              invalid={!!error?.message}
              allWithEmpty={false}
              {...restProps}
            />
          </Input.Wrapper>
        )
      }}
    ></Controller>
  )
}