import color from 'color';
import * as React from 'react';
import {
  Platform,
  StyleProp,
  StyleSheet,
  TextStyle,
  TouchableWithoutFeedback,
  View,
  ViewStyle,
} from 'react-native';
import { withTheme } from '../../core/theming';
import { white } from '../../styles/colors';
import type { $RemoveChildren } from '../../types';
import Text from '../Typography/Text';

type Props = $RemoveChildren<typeof View> & {
  /**
   * Custom color for the text.
   */
  color?: string;
  /**
   * Text for the title.
   */
  title: React.ReactNode;
  /**
   * Style for the title.
   */
  titleStyle?: StyleProp<TextStyle>;
  /**
   * Reference for the title.
   */
  titleRef?: React.RefObject<Text>;
  /**
   * Text for the subtitle.
   */
  subtitle?: React.ReactNode;
  /**
   * Style for the subtitle.
   */
  subtitleStyle?: StyleProp<TextStyle>;
  /**
   * Function to execute on press.
   */
  onPress?: () => void;
  style?: StyleProp<ViewStyle>;
  /**
   *  Title uses font scaling
   */
  allowTitleFontScaling?: boolean;
  /**
   * Subtitle uses font scaling
   */
  allowSubtitleFontScaling?: boolean;
  /**
   * @optional
   */
  theme: ReactNativePaper.Theme;
};

/**
 * A component used to display a title and optional subtitle in an appbar.
 *
 * <div class="screenshots">
 *   <figure>
 *     <img class="medium" src="screenshots/appbar-content.png" />
 *   </figure>
 * </div>
 *
 * ## Usage
 * ```js
 * import * as React from 'react';
 * import { Appbar } from 'react-native-paper';
 *
 * const MyComponent = () => (
 *     <Appbar.Header>
 *        <Appbar.Content title="Title" subtitle={'Subtitle'} />
 *     </Appbar.Header>
 * );
 *
 * export default MyComponent;
 * ```
 */
const AppbarContent = React.forwardRef(
  (
    {
      color: titleColor = white,
      subtitle,
      subtitleStyle,
      onPress,
      style,
      titleRef,
      titleStyle,
      theme,
      title,
      allowTitleFontScaling,
      allowSubtitleFontScaling,
      ...rest
    }: Props,
    ref: React.ForwardedRef<View>
  ) => {
    const { fonts } = theme;
    const subtitleColor = color(titleColor).alpha(0.7).rgb().string();
    let titleElement: React.ReactNode | null = null;
    let subtitleElement: React.ReactNode | null = null;
    const titleAccessibilityTraits: any = rest.accessible
      ? { accessible: false }
      : {
          accessible: true,
          accessibilityTraits: 'header',
          accessibilityRole: Platform.OS === 'web' ? 'heading' : 'header',
        };
    const subtitleAccessibilityTraits = rest.accessible
      ? { accessible: false }
      : {};
    if (title) {
      if (typeof title === 'string') {
        titleElement = (
          <Text
            ref={titleRef}
            style={[
              {
                color: titleColor,
                ...(Platform.OS === 'ios' ? fonts.regular : fonts.medium),
              },
              styles.title,
              titleStyle,
            ]}
            numberOfLines={1}
            allowFontScaling={allowTitleFontScaling}
            {...titleAccessibilityTraits}
          >
            {title}
          </Text>
        );
      } else {
        titleElement = title;
      }
    }
    if (subtitle) {
      if (typeof subtitle === 'string') {
        subtitleElement = (
          <Text
            style={[styles.subtitle, { color: subtitleColor }, subtitleStyle]}
            numberOfLines={1}
            allowFontScaling={allowSubtitleFontScaling}
            {...subtitleAccessibilityTraits}
          >
            {subtitle}
          </Text>
        );
      } else {
        subtitleElement = subtitle;
      }
    }
    const textView = (
      <View style={[styles.container, style]} {...rest} ref={ref}>
        {titleElement}
        {subtitleElement}
      </View>
    );
    if (onPress) {
      return (
        <TouchableWithoutFeedback onPress={(_event) => onPress()}>
          {textView}
        </TouchableWithoutFeedback>
      );
    } else {
      return textView;
    }
  }
);
AppbarContent.displayName = 'Appbar.Content';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 12,
  },
  title: {
    fontSize: Platform.OS === 'ios' ? 17 : 20,
  },
  subtitle: {
    fontSize: Platform.OS === 'ios' ? 11 : 14,
  },
});

export default withTheme(AppbarContent);

// @component-docs ignore-next-line
const AppbarContentWithTheme = withTheme(AppbarContent);
// @component-docs ignore-next-line
export { AppbarContentWithTheme as AppbarContent };