import { View, Text } from "@tarojs/components";
import './Box.scss'
import { BoxType } from "@/utils/types";
import Taro from "@tarojs/taro";
import { ColorType } from "@/context/themes/color";
import { useState } from "react";
import { LayoutChangeEvent,View as HView } from "react-native";
import { rpxToPx } from "@/utils/tools";

export default function Component(props: {
    children: React.ReactNode,
    title?: string,
    header?: React.ReactNode,
    style?: any,
    type?: BoxType,
    onClick?: Function,
    tranparentBg?: boolean
}) {

    const [height, setHeight] = useState<number>(1000000);

    const handleLayout = (event: LayoutChangeEvent) => {
        console.log('oppsu1111')
        const { height } = event.nativeEvent.layout;
        console.log(height)
        setHeight(height);
    };

    function onClick(e) {
        if (props.onClick) {
            props.onClick()
            return
        }
        Taro.vibrateShort({
            type: 'medium'
        })
    }

    return <View className="box-container" style={{ ...props.style, backgroundColor: props.tranparentBg ? 'transparent' : ColorType.box,height:height+rpxToPx(80) }} onTap={onClick}>
        {
            props.title && <Text className="box-title">{props.title}</Text>
        }
        <HView onLayout={handleLayout}>
            {props.children}
        </HView>
    </View>
}