import React, { CSSProperties, useEffect, useState } from "react";
import { Image, Text, View } from "@tarojs/components";
import { Size } from "../global/size";
import { TabbarItem } from "./tabbar";
import styles from "./oui-tabbar-item.module.scss";

interface OuiTabbarItemProps {
  item: TabbarItem;
  gap: number;
  iconSize?: Size;
  fontSize?: number;
  textColor?: string;
  selectedTextColor?: string;
  selected: boolean;
  onClick: Function;
  style?: CSSProperties;
}
class OuiTabbarItemStyle {
  gap: string;
}
class IconStyle {
  width: string;
  height: string;
}
class TextStyle {
  fontSize: string;
  color: string;
}
function OuiTabbarItem({
  item,
  gap,
  iconSize,
  fontSize,
  textColor,
  selectedTextColor,
  selected,
  onClick,
  style,
}: OuiTabbarItemProps) {
  const [ouiTabbarItemStyle, setOuiTabbarItemStyle] =
    useState<OuiTabbarItemStyle>();
  const [iconStyle, setIconStyle] = useState<IconStyle>();
  const [textStyle, setTextStyle] = useState<TextStyle>();
  useEffect(() => {
    setOuiTabbarItemStyle({
      gap: `${gap}px`,
    });
  }, [gap]);
  useEffect(() => {
    setIconStyle({
      width: `${iconSize?.width || 24}px`,
      height: `${iconSize?.height || 24}px`,
    });
  }, [iconSize]);
  useEffect(() => {
    setTextStyle({
      fontSize: `${fontSize || 12}px`,
      color: selected
        ? item.selectedColor || selectedTextColor || "#141414"
        : item.color || textColor || "#141414",
    });
  }, [selected, fontSize, textColor, selectedTextColor, item]);
  return (
    <View
      className={styles.component}
      style={{ ...ouiTabbarItemStyle, ...style }}
      onClick={() => onClick()}
    >
      <Image className="icon" src={item.icon} style={iconStyle} />
      {item.text ? <Text style={textStyle}>{item.text}</Text> : null}
    </View>
  );
}

export default OuiTabbarItem;