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

export interface IEdgeInsets {
    padding: string;
}

export class EdgeInsets {
    static zero = { padding: "0" };

    static fromLTRB(left: number, top: number, right: number, bottom: number): IEdgeInsets {
        return { padding: `${Taro.pxTransform(top, 750)} ${Taro.pxTransform(right, 750)} ${Taro.pxTransform(bottom, 750)} ${Taro.pxTransform(left, 750)}` };
    }

    static only(edge: { left?: number, top?: number, right?: number, bottom?: number }): IEdgeInsets {
        return { padding: `${Taro.pxTransform(edge.top ?? 0, 750)} ${Taro.pxTransform(edge.right ?? 0, 750)} ${Taro.pxTransform(edge.bottom ?? 0, 750)} ${Taro.pxTransform(edge.left ?? 0, 750)}` };
    }

    static symmetric(edge: { horizontal?: number, vertical?: number }): IEdgeInsets {
        return { padding: `${Taro.pxTransform(edge.vertical ?? 0, 750)} ${Taro.pxTransform(edge.horizontal ?? 0, 750)}` };
    }

    static merge(edge: { horizontal?: number, vertical?: number }): IEdgeInsets {
        return { padding: `${Taro.pxTransform(edge.vertical ?? 24, 750)} ${Taro.pxTransform(edge.horizontal ?? 32, 750)}` };
    }

    static all(edge: number): IEdgeInsets {
        return { padding: `${Taro.pxTransform(edge, 750)}` };
    }


}


export type IPaddingEdgeProps = "default" | "list" | "card" | "none" | IEdgeInsets;

export interface IPaddingProps extends ViewProps {
    padding?: IPaddingEdgeProps;
}

const Padding: React.FC<IPaddingProps> = (props) => {
    const { padding = "default", ...viewProps } = props;
    const _style = React.useMemo(() => {
        const style: React.CSSProperties = (props.style as React.CSSProperties) ?? {};
        if (typeof padding !== "string") {
            style.padding = padding.padding;
        }
        return style;
    }, [padding])
    const _classNames = classNames("c-padding", { ["c-padding-" + padding]: typeof padding === "string" && ["list", "card", "none"].includes(padding) });
    return (
        <View
            {...viewProps}
            style={_style}
            className={`${_classNames} ${props.className}`} >
            {props.children}
        </View>
    )
}

export default Padding;