import { ValidatePasswordComplexityType } from "@/common/helper";
import { CheckCircleFilled, CloseCircleFilled, InfoCircleFilled } from "@ant-design/icons";
import { useEmotionCss } from "@ant-design/use-emotion-css";
import { Typography, theme } from "antd";

const ValidationIcon: React.FC<{ isValid: boolean | undefined }> = ({ isValid }) => {
    const { token } = theme.useToken();

    if (isValid === undefined) {
        return (<InfoCircleFilled style={{ marginRight: token.margin, color: token.colorInfo }} />);
    }
    if (isValid) {
        return (<CheckCircleFilled style={{ marginRight: token.margin, color: token.colorSuccess }} />);
    }
    else {
        return (<CloseCircleFilled style={{ marginRight: token.margin, color: token.colorError }} />);
    }
}

const PasswordComplexityValidation: React.FC<{ result?: ValidatePasswordComplexityType }> = ({ result }) => {
    const pClass = useEmotionCss(({ token }) => {
        return { marginBottom: `${token.marginXS}px !important` };
    });
    const dClass = useEmotionCss(({ token }) => {
        return {
            padding: token.padding,
            borderRadius: token.borderRadius,
            border: `1px solid ${token.colorBorderSecondary}`,
            backgroundColor: token.colorBorderSecondary,
            marginBottom: token.margin,
        };
    });

    return (
        <div className={dClass}>
            {/* <Typography.Paragraph className={pClass}>
                密码规则：
            </Typography.Paragraph> */}
            <Typography.Paragraph className={pClass}>
                <ValidationIcon isValid={result?.isDigitValid} />
                <Typography.Text>必须包含数字</Typography.Text>
            </Typography.Paragraph>
            <Typography.Paragraph className={pClass}>
                <ValidationIcon isValid={result?.isLetterValid} />
                <Typography.Text>必须包含字母</Typography.Text>
            </Typography.Paragraph>
            <Typography.Paragraph className={pClass}>
                <ValidationIcon isValid={result?.isSpecialValid} />
                <Typography.Text>必须包含</Typography.Text>
                <Typography.Text mark>  {result?.special}  </Typography.Text>
                <Typography.Text>中1位特殊字符</Typography.Text>
            </Typography.Paragraph>
            <Typography.Paragraph className={pClass}>
                <ValidationIcon isValid={result?.isLenValid} />
                <Typography.Text>长度必须为{result?.minLen}至{result?.maxLen}位</Typography.Text>
            </Typography.Paragraph>
        </div>
    );
}

export default PasswordComplexityValidation;
