import { h, CSSProperties } from 'preact';
import { useState, useCallback } from 'preact/hooks';

import { useSafeArea, useSafeAreaStyle } from '../../../common/utils/use-safe-area';

import style from './css/index.less';

const SideTab = (props: any) => {
  const overflowStyle: CSSProperties = {
    overflowStyle: 'none',
  };

  // 内部状态
  const [tabIndex, setTabIndex] = useState(0);

  const {
    tabSideBarList,
    isRightSide,
    onClickTabSide, // 点击标签回调
  } = props;

  const tabClick = useCallback((item, index) => {
    console.log('tabClick', index);
    setTabIndex(index);
    onClickTabSide(item, index);
  }, [onClickTabSide]);

  const matchSideBarItemClassName = useCallback((item, index) => {
    if (index === tabIndex) {
      return `${style['pmg-match-side-tab-item']} ${style['pmg-tab-active']}`;
    }
    return style['pmg-match-side-tab-item'];
  }, [tabIndex]);

  const safeAreaStyle = useSafeAreaStyle();
  const safeArea = useSafeArea();

  // 计算 pmg-match-side-tab 的动态宽度和右边距
  // 使用原始的 right 值（单位：px），转换为 rem（1px = 0.02rem）
  const hasRightPadding = safeArea.right !== 0;
  const paddingNum = hasRightPadding ? safeArea.right * 0.02 : 0;
  const tabItemStyle = {
    paddingRight: hasRightPadding ? safeAreaStyle.paddingRight : '0',
    width: `${1.56 + paddingNum}rem`,
  };


  const matchSideTabClassName = isRightSide ? `${style['pmg-match-side-tab']} ${style['pmg-side-tab-active']}` : style['pmg-match-side-tab'];

  return (
    <div
      className={matchSideTabClassName}
      style={overflowStyle}
    >
      {
        tabSideBarList.map((item, index) => (
          <div
            style={tabItemStyle}
            key={index}
            className={matchSideBarItemClassName(item, index)}
            onClick={() => tabClick(item, index)}
          >
            <text className={style['pmg-match-side-tab-item-text']}>{item.name}</text>
          </div>
        ))
      }
    </div>
  );
};

export default SideTab;