import { View } from "@tarojs/components";
import React, { CSSProperties, ReactElement, ReactNode } from "react";
import styles from "./oui-form-item.module.scss";
import { Direction } from "@/components/global/direction";
import OuiLine from "@/components/oui-line/oui-line";
import OuiSpacer from "@/components/oui-spacer/oui-spacer";
import OuiTextField from "@/components/oui-text-field/oui-text-field";
import OuiImage from "@/components/oui-image/oui-image";
import { Icons } from "@/components/assets/icons";

interface OuiFormItemProps {
  direction?: Direction;
  align?: "begin" | "left" | "center" | "right" | "end";
  label?: string;
  required?: boolean;
  padding?: string;
  labelWidth?: string;
  showArrow?: boolean;
  style?: CSSProperties;
  children?: ReactNode;
}

function OuiFormItem({
  direction = Direction.horizontal,
  align,
  label = "Label",
  required = false,
  padding = "16px",
  labelWidth,
  showArrow = false,
  style,
  children,
}: OuiFormItemProps) {
  const generateComponentStyle = (): CSSProperties | undefined => {
    let addtion: CSSProperties = {};
    switch (direction) {
      case Direction.horizontal:
        addtion.flexDirection = "row";
        break;
      case Direction.vertical:
        addtion.flexDirection = "column";
        break;

      default:
        break;
    }
    return {
      ...addtion,
      padding: padding,
    };
  };
  const generateLabelStyle = (): CSSProperties | undefined => {
    return {
      width: labelWidth,
      flexDirection: "column",
      alignItems: "center",
      justifyContent: "center",
    };
  };
  const generateChildren = (): ReactNode | undefined => {
    const elements = React.Children.toArray(children);
    return elements.map((item: ReactElement) => {
      if (typeof item === "string") {
        return <View className={styles.text}>{item}</View>;
      }
      if (item.type === OuiTextField) {
        return React.cloneElement(
          item,
          {
            ...item.props,
          },
          item.props["children"]
        );
      }
    });
  };
  const generateElementStyle = (): CSSProperties | undefined => {
    if (align === "begin" || align === "left") {
      return {
        justifyContent: "flex-start",
      };
    }
    if (align === "center") {
      return {
        justifyContent: "center",
      };
    }
    if (align === "end" || align === "right") {
      return {
        justifyContent: "flex-end",
      };
    }
  };
  return (
    <View
      className={styles.component}
      style={{ ...generateComponentStyle(), ...style }}
    >
      {required ? <View className={styles.required}></View> : null}
      {direction == Direction.horizontal ? (
        <OuiSpacer direction={direction} gap={16} style={{ flexGrow: 1 }}>
          <View className={styles.label} style={generateLabelStyle()}>
            {label}
          </View>
          {children ? <OuiLine direction={Direction.vertical} /> : null}
          <View className={styles.element} style={generateElementStyle()}>
            {generateChildren()}
          </View>
          {showArrow ? (
            <OuiImage
              origin="iconoir"
              color="transparent"
              src={Icons.NavArrowRightIcon}
              width={16}
              height={16}
            />
          ) : null}
        </OuiSpacer>
      ) : null}
    </View>
  );
}

export default OuiFormItem;