import React, { CSSProperties, useEffect, useState } from "react";
import { View } from "@tarojs/components";
import OuiSafeArea from "@/components/oui-safearea/oui-safearea";
import styles from "./oui-tabbar.module.scss";
import OuiTabbarItem from "./oui-tabbar-item";
import { Size } from "@/components/global/size";
import { TabbarItem } from "./tabbar";
interface OuiTabbarProps {
  height?: number;
  current: number;
  items: TabbarItem[];
  iconSize?: Size;
  fontSize?: number;
  textColor?: string;
  selectedTextColor?: string;
  onTabChange?: Function;
  style?: CSSProperties;
}
class OuiTabbarStyle {}
class ContentStyle {
  height: string;
}
function OuiTabbar({
  height,
  current,
  items,
  iconSize,
  fontSize,
  textColor,
  selectedTextColor,
  onTabChange,
  style,
}: OuiTabbarProps) {
  const [ouiTabbarStyle, setOuiTabbarStyle] = useState<OuiTabbarStyle>();
  const [contentStyle, setContentStyle] = useState<ContentStyle>();

  useEffect(() => {
    setOuiTabbarStyle({});
    setContentStyle({
      height: `${height || 48}px`,
    });
  });

  return (
    <View className={styles.component} style={{ ...ouiTabbarStyle, ...style }}>
      <View className={styles.content} style={contentStyle}>
        {items.map((item: TabbarItem, index: number) => {
          return (
            <OuiTabbarItem
              item={item}
              gap={0}
              iconSize={item.iconSize || iconSize}
              fontSize={fontSize}
              textColor={textColor}
              selectedTextColor={selectedTextColor}
              selected={current === index}
              onClick={() => {
                if (item.onClick) {
                  item.onClick && item.onClick(index);
                  return;
                }
                onTabChange && onTabChange(index);
              }}
            />
          );
        })}
      </View>
      <OuiSafeArea />
    </View>
  );
}

export default OuiTabbar;