import { View } from "@tarojs/components";
import { Direction } from "@/components/global/direction";
import React, { CSSProperties, useEffect, useState } from "react";
import styles from "./oui-line.module.scss";

class OuiLineStyle {
  width?: string;
  height?: string;
  backgroundColor: string;
}

/**
 * @author Menger
 * @name 线条
 */
interface OuiLineProps {
  color?: string;
  weight?: number;
  direction?: Direction;
  style?: CSSProperties;
}

function OuiLine({
  color = "#eeeeee",
  weight,
  direction = Direction.horizontal,
  style,
}: OuiLineProps) {
  const [ouiLineStyle, setOuiLineStyle] = useState<OuiLineStyle>({
    width: "100%",
    height: `${weight || 1}px`,
    backgroundColor: color || "lightcoral",
  });
  useEffect(() => {
    setOuiLineStyle(
      direction === Direction.horizontal
        ? {
            width: "100%",
            height: `${weight || 1}px`,
            backgroundColor: color,
          }
        : {
            width: `${weight || 1}px`,
            height: "100%",
            backgroundColor: color,
          }
    );
  }, [color, weight, direction]);
  return (
    <View
      className={styles.component}
      style={{ ...ouiLineStyle, ...style }}
    ></View>
  );
}

export default OuiLine;