import React from 'react';
import type { StyleProp, ViewStyle } from 'react-native';
import type { IconName } from '../Icon';
import { renderPrefix, renderSuffix } from './utils';
import {
  StyledContainer,
  StyledHandlerContainer,
  StyledInputContainer,
} from './StyledSearch';
import Typography from '../Typography';

interface SearchTwoLineProps {
  /**
   * Name of Icon or ReactElement to render on the left side of the input, before the user's cursor.
   */
  prefix?: IconName | React.ReactElement;
  /**
   * Name of Icon or ReactElement to render on the right side of the input.
   */
  suffix?: IconName | React.ReactElement;
  /**
   * Additional wrapper style.
   */
  style?: StyleProp<ViewStyle>;
  /**
   * Label of the Input handler.
   */
  label: React.ReactNode;
  /**
   * Content of the Input handler.
   */
  content: React.ReactNode;
  /**
   * Testing id of the component.
   */
  testID?: string;
  /**
   * Variant of the SearchTwo
   * @default 'basic'
   */
  variant?: 'basic' | 'reversed';
  /**
   * If true, indicates that the SearchTwoLine is accessible to screen readers.
   */
  accessible?: boolean;
}

const SearchTwoLine = (props: SearchTwoLineProps) => {
  const {
    prefix = 'search-outlined',
    suffix,
    style,
    label,
    content,
    testID,
    variant = 'basic',
    accessible,
  } = props;
  return (
    <StyledContainer style={style} testID={testID} accessible={accessible}>
      <StyledInputContainer themeVariant={variant}>
        {renderPrefix({ prefix })}
        <StyledHandlerContainer>
          <Typography.Caption fontWeight="semi-bold">
            {label}
          </Typography.Caption>
          {content}
        </StyledHandlerContainer>
        {!!suffix && renderSuffix({ suffix })}
      </StyledInputContainer>
    </StyledContainer>
  );
};

export default SearchTwoLine;
