import { Input, InputProps, View, Image } from "@tarojs/components";
import React, { CSSProperties, useState } from "react";
import styles from "./oui-text-field.module.scss";
import { calculateInnerRadius } from "@/components/utils/ui/calculate";
import OuiLabel from "@/components/oui-label/oui-label";
import { Icons } from "@/components/assets/icons";
import OuiSpacer from "@/components/oui-spacer/oui-spacer";
import { Direction } from "@/components/global/direction";

class OuiTextFieldProps {
  type?: keyof InputProps.Type;
  label?: string;
  password?: boolean;
  placeholder?: string | undefined;
  icon?: string;
  iconSize?: number;
  height?: number;
  color?: string;
  radius?: number;
  cursorColor?: string;
  style?: CSSProperties;
  onInput?: Function;
  focus?: boolean;
}

class OuiScannerStyle {
  height: string;
  backgroundColor: string;
  borderRadius: string;
}

class OuiIconStyle {
  width: string;
  height: string;
  borderRadius: string;
  margin: string;
}

class OuiIconImageStyle {
  width: string;
  height: string;
}

class OuiTextStyle {
  padding: string;
}

function OuiTextField({
  type = "text",
  label,
  password,
  placeholder,
  icon,
  iconSize = 16,
  height = 44,
  color = "#f5f5f5",
  radius = 16.0,
  cursorColor = "#141414",
  style,
  onInput = () => {},
  focus = false,
}: OuiTextFieldProps) {
  const [currentFocus, setCurrentFocus] = useState<boolean>(focus);

  const [scannerStyle] = useState<OuiScannerStyle>({
    height: `${height}px`,
    backgroundColor: color,
    borderRadius: `${radius}px`,
  });

  /**
   * 图标外框样式
   * 圆角根据文本框圆角计算得来
   */
  const [iconStyle] = useState<OuiIconStyle>({
    width: `${height - 16}px`,
    height: `${height - 16}px`,
    borderRadius: `${calculateInnerRadius(radius, {
      top: 8,
      right: 8,
      bottom: 8,
      left: 8,
    })}px`,
    margin: `0 0 0 8px`,
  });

  /**
   * 图标中的图片样式
   */
  const [iconImageStyle] = useState<OuiIconImageStyle>({
    width: `${iconSize}px`,
    height: `${iconSize}px`,
  });

  /**
   * 文本输入区域特殊样式
   * 如果存在图标,则文本输入区域和图标之间的边距为8像素
   * 否则只有文本,则只需要一个16像素的外边距
   */
  const [textStyle] = useState<OuiTextStyle>({
    padding: `0 16px 0 ${icon ? 8 : 16}px`,
  });

  /**
   * 值
   */
  const [value, setValue] = useState<string>("");

  /**
   * 是否显示密码
   */
  const [showPassword, setShowPassword] = useState<boolean>(false);

  const doInput = (value: string) => {
    setValue(value);
    onInput(value);
  };

  const doBlur = () => {
    setShowPassword(false);
    setCurrentFocus(false);
  };

  return (
    <View className={styles.component} style={style}>
      <OuiSpacer gap={4}>
        {label ? <OuiLabel>{label}</OuiLabel> : null}
        <View
          className={styles.scanner}
          style={scannerStyle}
          onClick={() => setCurrentFocus(true)}
        >
          {icon ? (
            <View className={styles.icon} style={iconStyle}>
              <Image src={icon} style={iconImageStyle} />
            </View>
          ) : null}
          <Input
            className={styles.text}
            type={type}
            password={password && !showPassword}
            placeholder={placeholder}
            value={value}
            cursorColor={cursorColor}
            style={textStyle}
            onInput={(e) => doInput(e.detail.value)}
            onBlur={() => doBlur()}
            alwaysEmbed={true}
            focus={currentFocus}
          />
          {value.length > 0 ? (
            <OuiSpacer
              direction={Direction.horizontal}
              alignItems="center"
              style={{ paddingRight: "8px" }}
            >
              <View className={styles.option} onClick={() => doInput("")}>
                <Image
                  className={styles["option-icon"]}
                  src={Icons.XMarkIcon}
                />
              </View>
              {password ? (
                <View
                  className={styles.option}
                  onClick={() => setShowPassword(!showPassword)}
                >
                  <Image
                    className={styles["option-icon"]}
                    src={Icons.EyeIcon}
                  />
                </View>
              ) : null}
            </OuiSpacer>
          ) : null}
        </View>
      </OuiSpacer>
    </View>
  );
}

export default OuiTextField;