"use strict";

import React, { useContext } from 'react';
import { Animated, StyleSheet, TouchableOpacity, useWindowDimensions, View } from 'react-native';
import { ApplicationContext } from "../../Context/index.js";
import { getTypoStyle, Text } from "../../Text/index.js";
import InputSearch from "../../Input/InputSearch.js";
import { Colors, Spacing, Styles } from "../../Consts/index.js";
import { Image } from "../../Image/index.js";
import { SizedBox } from "../../SizedBox/index.js";
import { Icon } from "../../Icon/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const HeaderTitle = /*#__PURE__*/React.memo(props => {
  const {
    theme
  } = useContext(ApplicationContext);
  const opacity = props.animatedValue?.interpolate({
    inputRange: [0, 100],
    outputRange: [0, 1],
    extrapolate: 'clamp'
  });
  return /*#__PURE__*/_jsx(Animated.Text, {
    ...props,
    style: [getTypoStyle(theme, 'headline', 'bold'), {
      opacity,
      color: props.tintColor
    }]
  });
});
const HeaderSearch = /*#__PURE__*/React.forwardRef((props, ref) => {
  const opacity = props.animatedValue?.interpolate({
    inputRange: [0, 100],
    outputRange: [0, 1],
    extrapolate: 'clamp'
  });
  return /*#__PURE__*/_jsx(Animated.View, {
    style: {
      opacity
    },
    children: /*#__PURE__*/_jsx(InputSearch, {
      ...props,
      children: undefined,
      ref: ref
    })
  });
});

/**
 * Header user title
 * @constructor
 */
const TitleUser = ({
  title,
  subTitle,
  image,
  tintColor,
  verify,
  onPress,
  animatedValue
}) => {
  const {
    width: widthDevice
  } = useWindowDimensions();
  const {
    theme
  } = useContext(ApplicationContext);
  const opacity = animatedValue?.interpolate({
    inputRange: [0, 100],
    outputRange: [0, 1],
    extrapolate: 'clamp'
  });
  return /*#__PURE__*/_jsx(Animated.View, {
    style: {
      opacity
    },
    children: /*#__PURE__*/_jsx(TouchableOpacity, {
      style: [styles.headerTitleContainer, {
        width: widthDevice - Spacing.M * 2,
        marginLeft: -Spacing.XS
      }],
      onPress: onPress,
      disabled: onPress === undefined,
      children: /*#__PURE__*/_jsxs(View, {
        style: [Styles.row, Styles.flex],
        children: [/*#__PURE__*/_jsxs(View, {
          children: [/*#__PURE__*/_jsx(View, {
            style: [styles.imageContainer, {
              borderColor: theme.colors.border.default,
              backgroundColor: theme.colors.primary.container
            }],
            children: /*#__PURE__*/_jsx(Image, {
              source: {
                uri: image
              },
              style: styles.circle
            })
          }), verify && /*#__PURE__*/_jsx(View, {
            style: [styles.dotAvatar, {
              backgroundColor: theme.colors.success.default
            }],
            children: /*#__PURE__*/_jsx(Icon, {
              name: 'check',
              color: Colors.white,
              size: 10
            })
          })]
        }), /*#__PURE__*/_jsx(SizedBox, {
          width: Spacing.S
        }), /*#__PURE__*/_jsxs(View, {
          style: Styles.flex,
          children: [/*#__PURE__*/_jsx(Text, {
            typography: "subhead",
            fontWeight: 'bold',
            color: tintColor,
            numberOfLines: 1,
            children: title
          }), !!subTitle && /*#__PURE__*/_jsx(Text, {
            typography: "caption2",
            color: tintColor,
            numberOfLines: 1,
            children: subTitle
          })]
        })]
      })
    })
  });
};
const styles = StyleSheet.create({
  headerTitleContainer: {
    justifyContent: 'center',
    height: '100%',
    paddingBottom: 4
  },
  imageContainer: {
    width: 40,
    height: 40,
    borderRadius: 20,
    borderWidth: 0.2,
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden'
  },
  dotAvatar: {
    position: 'absolute',
    width: 12,
    height: 12,
    borderRadius: 6,
    bottom: -2,
    right: -2,
    borderWidth: 0.5,
    borderColor: Colors.white,
    alignItems: 'center',
    justifyContent: 'center'
  },
  verifiedIcon: {
    width: 12,
    height: 12,
    marginLeft: Spacing.XS
  },
  circle: {
    width: '100%',
    height: '100%'
  }
});
export { HeaderTitle, HeaderSearch, TitleUser };
//# sourceMappingURL=HeaderTitle.js.map