import * as React from 'react';
import { TouchableOpacity, View } from 'react-native';
import Label from './label';
import { TopHeaderLeftArrowIcon } from './icons/top-header-left-arrow';
import Text from './text';
import IconButton from './icon-button';

interface SubPageHeaderProps {
  height?: string;
  componentGap?: number;
  title?: string;
  funcComponent?: React.ReactNode[];
  backgroundColor?: any;
  subTitle?: string;
  subContent?: string;
  exitEvent: () => void;
  exitIcon?: React.ReactNode;
  exitIconColor?: string;
  titleColor?: string;
}

const SubPageHeader = React.forwardRef<View, SubPageHeaderProps>(
  (
    {
      height,
      componentGap,
      title,
      funcComponent,
      backgroundColor,
      subTitle,
      subContent,
      exitEvent,
      exitIcon,
      exitIconColor,
      titleColor = 'white',
    },
    ref,
  ) => {
    return (
      <>
        <View
          className={`flex w-full flex-row items-center justify-between px-[16px] ${height ? height : 'h-[48px]'}`}
          ref={ref}
        >
          <IconButton
            icon={exitIcon || <TopHeaderLeftArrowIcon color={exitIconColor} />}
            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
            onPress={exitEvent}
          />
          {title && (
            <View className="absolute left-0 right-0 flex items-center">
              {/* <Label value={title} labelClassName="text-[17px]" isLabelOnly /> */}
              <Text
                face={'title'}
                size="small"
                weight="bold"
                textColor={titleColor}
              >
                {title}
              </Text>
            </View>
          )}
          <View className="flex-1 flex flex-row items-center justify-end gap-4">
            {funcComponent &&
              funcComponent.map((comp, index) => (
                <View key={index}>{comp}</View>
              ))}
          </View>
        </View>

        <View className={'px-[20px] mt-[16px]'}>
          {subTitle && subTitle.length > 0 && (
            <Text
              face={'title'}
              size={'xlarge'}
              weight={'bold'}
              numberOfLines={2}
            >
              {subTitle}
            </Text>
          )}
          {subContent && subContent.length > 0 && (
            <Text
              face={'title'}
              size={'xsmall'}
              textColor={'gray-500'}
              weight="medium"
              numberOfLines={1}
            >
              {subContent}
            </Text>
          )}
        </View>
      </>
    );
  },
);

export default SubPageHeader;