import { observer } from 'mobx-preact';
import { WheelPicker } from 'pixuireactcomponents';
import { h, Component, CSSProperties } from 'preact';

import { getSafeAreaInfo } from '../common/utils/safe-area';


import { $t } from '../locale';
import PMGButton from '../pmg-button/pmg-button';

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

@observer
class PMGSelectPicker extends Component<any, any> {
  // 默认的样式
  itemTextStyle: CSSProperties = {
    fontSize: '.28rem',
    color: 'rgba(255, 255, 255, 0.7)',
  };

  selectedTextStyle: CSSProperties = {
    fontSize: '.28rem',
    lineHeight: 'normal',
    color: '#fff',
  };

  selectedAreaStyle: CSSProperties = {
    borderBottom: '.02rem solid rgba(69, 69, 69)',
    borderTop: '.02rem solid rgba(69, 69, 69)',
    width: '100%',
    backgroundColor: 'transparent',
  };

  maskAreaStyle: CSSProperties = {
    backgroundColor: 'rgba(0, 0, 0, 0.06)',
  };

  constructor(props) {
    super(props);
    this.state = {
      showTestPicker: false,
      showTestPicker2: false,
    };
  }

  // 默认的 onChange 逻辑
  handlePickerChange = (pickerIndex, value) => {
    console.log('onChange', pickerIndex, value);

    // 如果父组件传递了 onChange，则调用父组件的逻辑
    if (this.props.onChange) {
      this.props.onChange(pickerIndex, value);
    }
  };


  render() {
    // pickerTitle 标题
    // pickerList 选项列表
    // clickCancel 点击取消按钮的回调
    // clickConfirm 点击确定按钮的回调
    // onChange 选项改变的回调,如果父组件传递了 onChange，则调用父组件的逻辑
    const { pickerTitle, pickerList = [], clickCancel, clickConfirm, selectedList = []  } = this.props;

    const safeArea = getSafeAreaInfo();
    // 计算 pmg-scroll-head 的动态左右边距
    // 使用原始的 right 值（单位：px），转换为 rem（1px = 0.02rem）
    const hasRightPadding = safeArea.right !== 0;
    const hasLeftPadding = safeArea.left !== 0;
    const paddingLeftNum = hasLeftPadding ? safeArea.left * 0.02 : 0;
    const paddingRightNum = hasRightPadding ? safeArea.right * 0.02 : 0;
    const headStyle = {
      paddingLeft: `${.4 + paddingLeftNum}rem`,
      paddingRight: `${.4 + paddingRightNum}rem`,
    };

    return (
      <div
        className={styles['pmg-scroll-selection']}
      >
        <div className={styles['pmg-scroll-wrap']}>
          <div
            className={styles['pmg-scroll-head']}
            style={headStyle}
          >
            <PMGButton
              type="secondary"
              size="small"
              text={$t('取消')}
              onClick={clickCancel}
            />
            <div className={styles['pmg-scroll-title-wrap']}>
              <text className={styles['pmg-scroll-title']}>
                {pickerTitle}
              </text>
            </div>
            <PMGButton
              type="primary"
              size="small"
              text={$t('确定')}
              onClick={clickConfirm}
            />
          </div>
          <div className={styles['pmg-scroll-content']}>
            <div className={styles['pmg-wheel-picker-list']}>
              {
                pickerList.map((picker, pickerIndex) => (
                  <WheelPicker
                    key={`wheel-picker-${pickerIndex}`}
                    rootClassName={styles['pmg-wheel-picker-item']}
                    options={picker}
                    visibleAbove={2}
                    visibleBelow={2}
                    defaultOption={selectedList[pickerIndex]}
                    element={{
                      itemTextStyle: this.itemTextStyle,
                      selectedTextStyle: this.selectedTextStyle,
                      selectedAreaStyle: this.selectedAreaStyle,
                      AboveMaskAreaStyle: this.maskAreaStyle,
                      BelowMaskAreaStyle: this.maskAreaStyle,
                    }}
                    onChange={value => this.handlePickerChange(pickerIndex, value)}
                  />
                ))
              }
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default PMGSelectPicker;