import React, { CSSProperties, ReactNode } from "react";
import OuiPopUp from "@/components/oui-popup/oui-popup";
import styles from "./oui-picker.module.scss";
import { View } from "@tarojs/components";

interface OuiPickerProps {
  visible?: boolean;
  onMaskClick?: Function;
  title?: string;
  onConfirm?: Function;
  onCancel?: Function;
  children?: ReactNode;
}

function OuiPicker({
  visible,
  onMaskClick = () => {},
  title,
  onConfirm = () => {},
  onCancel = () => {},
  children,
}: OuiPickerProps) {
  const itemHeight = 36;
  const contentStyle = (): CSSProperties => {
    return {
      height: `${itemHeight * 5}px`,
    };
  };
  const pointerStyle = (): CSSProperties => {
    return {
      height: `${itemHeight}px`,
    };
  };
  return (
    <OuiPopUp
      className={styles.components}
      visible={visible}
      onMaskClick={onMaskClick}
    >
      <View className={styles.header}>
        <View className={styles.button} onClick={(e) => onCancel(e)}>
          取消
        </View>
        {title ? <View>{title}</View> : null}
        <View className={styles.button} onClick={(e) => onConfirm(e)}>
          确认
        </View>
      </View>
      <View className={styles.content} style={{ ...contentStyle() }}>
        {children}
        <View className={styles.pointer} style={{ ...pointerStyle() }}></View>
      </View>
      <View className={styles.footer}></View>
    </OuiPopUp>
  );
}

export default OuiPicker;