import React, { useId, useMemo } from 'react';

import type { SafeOmit } from '@shoptet/utils';

import type { FormRowProps } from '../../FormRow/FormRow';
import { FormRow } from '../../FormRow/FormRow';
import type { FormRowHelperTextOwnProps } from '../../FormRow/FormRowHelperText';
import type { ImageSelectProps } from '../../Inputs/ImageSelect/ImageSelect';
import { ImageSelect } from '../../Inputs/ImageSelect/ImageSelect';
import type { SelectKey } from '../../Inputs/RadioGroup/RadioGroup';

interface ImageSelectFieldInheritedProps
  extends
    Partial<FormRowHelperTextOwnProps>,
    SafeOmit<FormRowProps, 'as' | 'children' | 'label' | 'htmlFor' | 'isFullWidth'> {}

export interface ImageSelectFieldProps<T extends object = object, V extends SelectKey = string>
  extends ImageSelectProps<T, V>, ImageSelectFieldInheritedProps {
  /**
   * The label for the field.
   */
  label: string;
  /**
   * Whether the label should be visually hidden (still accessible to screen readers).
   */
  labelHidden?: boolean;
}

export function ImageSelectField<T extends object = object, V extends SelectKey = string>({
  id,
  label,
  labelHidden,
  required,
  tooltip,
  justify,
  hint,
  error,
  warning,
  ...rest
}: ImageSelectFieldProps<T, V>) {
  const internalId = useId();
  const inputId = id ?? `imageSelect${internalId}`;

  const helperTextElement = useMemo(
    () => <FormRow.HelperText error={error} warning={warning} hint={hint} />,
    [error, hint, warning]
  );

  return (
    <FormRow
      as='div'
      htmlFor={inputId}
      justify={justify}
      label={label}
      labelHidden={labelHidden}
      required={required}
      tooltip={tooltip}
    >
      <ImageSelect<T, V>
        id={inputId}
        validity={error ? 'error' : warning ? 'warning' : undefined}
        required={required}
        {...rest}
      />
      {helperTextElement}
    </FormRow>
  );
}

ImageSelectField.displayName = 'ImageSelectField';