import * as React from 'react';
import { TouchableOpacity, View } from 'react-native';
import Text from './text';
import { ChevronDownIcon } from './icons/chevron-down';

interface MainPageHeaderProps {
  height?: string;
  componentGap?: number;
  tabTitle?: string[];
  title?: string;
  activeTab?: string;
  select?: boolean;
  onTabChange?: (name: string) => void;
  selectOnPress?: () => void;
  funcComponent?: React.ReactNode[];
  backgroundColor?: string;
}

const MainPageHeader = React.forwardRef<View, MainPageHeaderProps>(
  (
    {
      height,
      componentGap,
      tabTitle,
      activeTab,
      onTabChange,
      funcComponent,
      backgroundColor,
      select,
      selectOnPress,
    },
    ref,
  ) => {
    return (
      <View
        style={{backgroundColor: backgroundColor && backgroundColor}}
        className={`flex w-full flex-row items-center justify-between px-[20px] ${height ? height : 'h-[48px]'}`}
        ref={ref}
      >
        <View className="flex-1 flex flex-row items-center justify-start gap-4">
          {tabTitle &&
            tabTitle.map((name, index) => {
              if (tabTitle.length === 1 && select) {
                return (
                  <TouchableOpacity
                    key={index}
                    activeOpacity={0.7}
                    onPress={selectOnPress}
                    className="flex-row gap-[4px] items-center"
                  >
                    <Text
                      face={'title'}
                      size="xlarge"
                      weight={activeTab === name ? 'extrabold' : 'medium'}
                      textColor={`${activeTab === name ? 'black' : 'gray-500'}`}
                    >
                      {name}
                    </Text>
                    <ChevronDownIcon />
                  </TouchableOpacity>
                );
              }

              return (
                <TouchableOpacity
                  key={index}
                  activeOpacity={tabTitle.length === 1 ? 1 : 0.7}
                  onPress={() =>
                    tabTitle.length === 1
                      ? null
                      : onTabChange
                        ? onTabChange(name)
                        : null
                  }
                >
                  {/* <Label
                  value={name}
                  labelClassName={`text-[24px] ${activeTab === name ? 'text-black' : 'text-gray-500'}`}
                  isLabelOnly
                /> */}
                  <Text
                    face={'title'}
                    size="xlarge"
                    weight={activeTab === name ? 'extrabold' : 'medium'}
                    textColor={`${activeTab === name ? 'black' : 'gray-500'}`}
                  >
                    {name}
                  </Text>
                </TouchableOpacity>
              );
            })}
        </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>
    );
  },
);

export default MainPageHeader;