import React, { useState, useCallback } from 'react';
import { View, ScrollView } from '@tarojs/components';
import './CategoryTabbarMore.css';

interface TabItem {
  id: string;
  name: string;
  disabled?: boolean;
}

interface CategoryTabbarMoreProps {
  tabList: TabItem[];
  onSelect?: (id: string) => void;
}

const CategoryTabbarMore: React.FC<CategoryTabbarMoreProps> = ({
  tabList,
  onSelect,
}) => {
  const [unfolded, setUnfolded] = useState(false);

  const handleToggle = useCallback(() => {
    setUnfolded(!unfolded);
  }, [unfolded]);

  const handleItemSelect = useCallback((id: string) => {
    setUnfolded(false);
    onSelect?.(id);
  }, [onSelect]);

  return (
    <View className="c-tabbar-more">
      <View className="c-tabbar-more__btn" onClick={handleToggle}>
        <View className={`wr ${unfolded ? 'wr-arrow-up' : 'wr-arrow-down'}`}></View>
      </View>
      {unfolded && (
        <View className="t-tabbar-more__boardwrapper">
          <View className="t-tabbar-more__mask" onClick={() => setUnfolded(false)} />
          <ScrollView className="c-tabbar-more__board" scrollY>
            <View className="c-tabbar-more__boardinner">
              {tabList.map((item) => (
                <View
                  key={item.id}
                  className="c-tabbar-more__item text-overflow"
                  onClick={() => !item.disabled && handleItemSelect(item.id)}
                >
                  {item.name}
                </View>
              ))}
            </View>
          </ScrollView>
        </View>
      )}
    </View>
  );
};

export type { CategoryTabbarMoreProps };
export default CategoryTabbarMore;