import React, { type Ref } from 'react';
import classNames from 'classnames';

import { Textarea as CoreTextarea } from '@shoptet/ui-core-web';
import type { SafeOmit } from '@shoptet/utils';

import type { Complete, Exact, Size } from '../../../types';
import type { HTMLTextareaProps, PlaceholderProps, TextareaOwnProps as TextareaBaseProps } from '../types';

export interface TextareaCommonProps
  extends SafeOmit<TextareaBaseProps, 'label' | 'value' | 'defaultValue'>, PlaceholderProps {}

export interface TextareaOwnProps {
  cols?: HTMLTextareaProps['cols'];
  defaultValue?: string | number;
  label?: string;
  ref?: Ref<HTMLTextAreaElement>;
  rows?: HTMLTextareaProps['rows'];
  value?: string | number;
  width?: Size;
}

/** @inheritdoc */
export interface TextareaProps extends TextareaOwnProps, TextareaCommonProps {}

type GetTextareaClassName = Complete<Pick<TextareaProps, 'width' | 'error' | 'warning'>>;

export const getTextareaClassName = ({ width, error, warning }: GetTextareaClassName) =>
  classNames('textarea', width, {
    'error-field': error,
    'warning-field': warning && !error,
  });

export const Textarea = function Textarea({
  cols,
  defaultValue,
  error,
  label,
  ref,
  rows = 4,
  value,
  warning,
  width = 'lg',
  ...rest
}: TextareaProps) {
  rest satisfies Exact<SafeOmit<TextareaBaseProps, 'label'> & PlaceholderProps, typeof rest>;

  return (
    <CoreTextarea
      a11yLabel={label}
      className={getTextareaClassName({ width, error, warning })}
      cols={cols}
      defaultValue={defaultValue === undefined ? undefined : String(defaultValue)}
      invalid={!!error}
      ref={ref}
      rows={rows}
      value={value === undefined ? undefined : String(value)}
      {...rest}
    />
  );
};