import { Col, Form, Input, Row } from 'antd';
import { useEffect, useState } from 'react';
import styles from './BackCardNumber.less';
import React from 'react';
import schema from "./schema"
import { getItemProps } from "../../utils"
import FormItem from '../FormItem/FormItem';
const BankCardNumber = (item: any) => {
  const data: any = getItemProps(schema, item)
  const { itemProps: { label, name }, BValue, innerStyle } = data
  const [inputIndex, setInputIndex] = useState<any>(-1);
  const [valueText, setValueText] = useState<any>('');

  useEffect(() => {
    setValueText(BValue);
  }, []);

  const onChange = (e: any) => {
    const value = e.target.value;
    const FocusIndex =
      Math.floor((value?.length || 0) / 4) >= 3 ? 3 : Math.floor((value?.length || 0) / 4);
    setInputIndex(FocusIndex);
    setValueText(value);
  };

  const onFocus = (e: any) => {
    const value = e.target.value;
    const FocusIndex =
      Math.floor((value?.length || 0) / 4) >= 3 ? 3 : Math.floor((value?.length || 0) / 4);
    setInputIndex(FocusIndex);

  };

  const onBlur = () => {
    setInputIndex(-1);
  };


  return (
    <FormItem style={{ position: 'relative' }} label={label}>
      <Form.Item name={name} noStyle>
        <Input
          onChange={onChange}
          onFocus={onFocus}
          onBlur={onBlur}
          maxLength={19}
          className={styles.oInputSlef}
        />
      </Form.Item>
      <div style={...innerStyle}>
        <Row gutter={8}>
          {[0, 1, 2, 3].map((item) => {
            return (
              <Col span={6} key={item}>
                <div className={styles.oInput}>
                  <span className={`${styles.text} ${inputIndex === item && styles.input_active}`}>
                    {item !== 3
                      ? valueText?.substring(item * 4, (item + 1) * 4)
                      : valueText?.substring(item * 4, valueText.length)}
                  </span>
                </div>
              </Col>
            );
          })}
        </Row>
      </div>
    </FormItem>
  );
};

export default BankCardNumber;