import { View } from '@tarojs/components';
import { ViewProps } from '@tarojs/components/types/View';
import classNames from 'classnames';
import Taro from '@tarojs/taro';
import React from 'react';
import './index.scss'


export type IGap = number | "default" | "lg" | "sm";

export interface IFlexProps extends ViewProps {
    /**行间距 */
    rowGap?: IGap;
    /**列间距 */
    columnGap?: IGap;
    /**交叉轴对齐方式 */
    alignItem?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
    /**主轴对齐方式 */
    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around";
    direction?: "column" | "column-reverse" | "row" | "row-reverse";
    flex?: number;
    scrollY?: boolean;
    display?: "flex" | "block";
    wrap?: boolean;
}

const Flex: React.FC<IFlexProps> = (props) => {
    let { rowGap, display = "flex", columnGap, alignItem, justifyContent, scrollY, wrap, flex, direction = "column", className, style = {}, ...divProps } = props;

    const _classNames = classNames("c-flex", className, {
        ["c-flex-direction-" + direction]: direction !== "column",
        ["c-flex-justify-content-" + justifyContent]: justifyContent,
        ["c-flex-align-item-" + alignItem]: alignItem,
        ['c-flex-align-item-scrollY']: scrollY,
        ['c-flex-' + display]: display,
        "c-flex-wrap": wrap
    })

    const getGap = (gap?: IGap) => {
        let _gap: IGap | undefined = gap;
        if (!gap) {
            return undefined;
        }
        if (_gap === "default") {
            _gap = 32;
        }
        else if (_gap === "lg") {
            _gap = 40;
        }
        else if (_gap === "sm") {
            _gap = 24;
        }
        return _gap;
    }


    const _style = React.useMemo(() => {
        const _rowGap = getGap(rowGap);
        const _columnGap = getGap(columnGap);
        let _flexStyle: React.CSSProperties = {
            flex,
            rowGap: _rowGap && Taro.pxTransform(_rowGap),
            columnGap: _columnGap && Taro.pxTransform(_columnGap),
            ...(style as React.CSSProperties),
        };
        return _flexStyle;
    }, [rowGap, columnGap])

    // const _gapstyle = React.useMemo(() => {
    //     let _gapStyle: React.CSSProperties = {};
    //     const _rowGap = getGap(rowGap);
    //     const _columnGap = getGap(columnGap);
    //     if (_rowGap) {
    //         _gapStyle.marginTop = Taro.pxTransform(_rowGap / 2);
    //         _gapStyle.marginBottom = Taro.pxTransform(_rowGap / 2);
    //     }
    //     if (_columnGap) {
    //         _gapStyle.marginLeft = Taro.pxTransform(_columnGap / 2);
    //         _gapStyle.marginRight = Taro.pxTransform(_columnGap / 2);
    //     }
    //     return _gapStyle;
    // }, [rowGap, columnGap])
    return (
        <View {...divProps} className={_classNames} style={_style} >
            {props.children}
        </View>
    )
}

export default Flex;