import { FC, useState } from "react";

/**
 * @description 手机号码选择框
 */
import { Input, Space } from "antd-mobile";
import { useTranslations } from "next-intl";

interface MobileValue {
    preValue: string | number;
    realValue: string;
}
const columns = [["86", "01", "02", "03"]];

interface MobileFieldProps {
    value?: MobileValue;
    onChange?: (value: MobileValue) => void;
    code?: boolean;
}

const MobileField: FC<MobileFieldProps> = ({
    value = { preValue: "86", realValue: "" },
    onChange,
    code = true,
}) => {
    const [visible, setVisible] = useState(false);
    const t = useTranslations("form");
    const triggerValue = (changedValue: Partial<MobileValue>) => {
        onChange?.({ ...value, ...changedValue });
    };

    const onRealValueChange = (value: string) => {
        triggerValue({ realValue: value.replace(/[^0-9]/g, "") });
    };

    // const onPreValueChange = (value: PickerValue[]) => {
    //     const v = value[0];
    //     if (v === null) return;
    //     triggerValue({ preValue: v });
    // };
    return (
        <>
            <Space align="center">
                {code && (
                    <>
                        <Space align="center" onClick={() => setVisible(true)}>
                            <div className={"text-[#999]"}>+{value.preValue}</div>
                        </Space>
                    </>
                )}
                <Input
                    value={value.realValue}
                    placeholder={t("phone")}
                    maxLength={11}
                    onChange={onRealValueChange}
                />
            </Space>
            {/*<Picker*/}
            {/*    columns={columns}*/}
            {/*    visible={visible}*/}
            {/*    onClose={() => {*/}
            {/*        setVisible(false);*/}
            {/*    }}*/}
            {/*    value={[value.preValue]}*/}
            {/*    onConfirm={onPreValueChange}*/}
            {/*/>*/}
        </>
    );
};

export default MobileField;