import type { ForwardedRef } from 'react';
import React, { useEffect, useId, useRef, useState } from 'react';

import { forwardRef } from '../../../utils/forwardRef';
import type { FormRowProps } from '../../FormRow/FormRow';
import { FormRow } from '../../FormRow/FormRow';
import type { FormRowHelperTextOwnProps } from '../../FormRow/FormRowHelperText';
import { IconButton } from '../../IconButton/IconButton';
import type { SingleSelectProps } from '../../Inputs/SingleSelect/SingleSelect';
import { SingleSelect } from '../../Inputs/SingleSelect/SingleSelect';
import { TextInput } from '../../Inputs/TextInput/TextInput';

interface SelectAddFieldInheritedProps
  extends
    Partial<FormRowHelperTextOwnProps>,
    Omit<FormRowProps, 'as' | 'className' | 'children' | 'label' | 'htmlFor' | 'isFullWidth'> {
  label: string;
}

export interface SelectAddFieldProps<T extends object = object>
  extends
    Omit<SingleSelectProps<T, string>, 'error' | 'warning' | 'mode' | 'onQueryBlur' | 'onQueryChange' | 'onQueryFocus'>,
    SelectAddFieldInheritedProps {}

export const SelectAddField = Object.assign(
  forwardRef(function SelectAddField<T extends object = object>(
    {
      error,
      hint,
      id,
      justify,
      value,
      label,
      required,
      tooltip,
      warning,
      options,
      width,
      onChange,
      labelHidden,
      ...rest
    }: SelectAddFieldProps<T>,
    forwardedRef: ForwardedRef<HTMLInputElement>
  ) {
    const internalId = useId();
    const inputId = id ?? `selectAdd${internalId}`;

    const [isAdding, setIsAdding] = useState(false);
    const [inputValue, setInputValue] = useState('');
    const [selectValue, setSelectValue] = useState(value ?? '');

    const inputRef = useRef<HTMLInputElement>(null);

    useEffect(() => {
      if (isAdding && inputRef.current) {
        inputRef.current.focus();
      }
    }, [isAdding]);

    const handleAddClick = (e: React.MouseEvent<HTMLButtonElement>) => {
      e.preventDefault();
      setIsAdding(true);
      onChange?.(inputValue);
    };

    const handleCancelClick = (e: React.MouseEvent<HTMLButtonElement>) => {
      e.preventDefault();
      setIsAdding(false);
      onChange?.(selectValue);
    };

    const handleInputChange = (value: string) => {
      setInputValue(value);
      onChange?.(value);
    };

    const handleSelectChange = (option: string) => {
      setSelectValue(option);
      onChange?.(option);
    };

    const selectElement = React.cloneElement(
      <SingleSelect
        id={inputId}
        ref={forwardedRef}
        required={required}
        value={selectValue}
        onChange={value => handleSelectChange(value ?? '')}
        options={options}
        error={!!error}
        warning={!!warning}
        label={label}
        width={width}
        {...rest}
      />,
      isAdding ? { hidden: true } : {}
    );

    return (
      <FormRow
        label={label}
        required={required}
        tooltip={tooltip}
        justify={justify}
        isFullWidth={width === 'full'}
        labelHidden={labelHidden}
      >
        <div className='v2FormField__singleSelect'>
          {!isAdding && selectElement}
          {isAdding && (
            <TextInput ref={inputRef} value={inputValue} width={width} onChange={handleInputChange} label={label} />
          )}
          <FormRow.HelperText error={error} warning={warning} hint={hint} />
        </div>
        {isAdding ? (
          <IconButton icon='shp-remove' variant='destructive' ghost={true} onClick={handleCancelClick} />
        ) : (
          <IconButton icon='shp-plus' ghost={true} onClick={handleAddClick} />
        )}
      </FormRow>
    );
  }),
  {
    Option: SingleSelect.Option,
  }
);