import React, { memo, useState, useEffect } from 'react';
import { InputNumber } from 'antd';
import styles from './index.less';
import { TPosDefaultType, TPosItem } from '../types';

type PosProps = {
  value?: TPosDefaultType;
  onChange?: (v: TPosItem | string) => void;
};

export default memo(function Pos(props: PosProps) {
  const { value, onChange } = props;
  let _this: typeof Pos = Pos;

  const handleChange = (index: number, v: TPosItem | string) => {
    let arr: any = value || [];
    arr[index] = v;
    onChange && onChange(arr);
  };

  return (
    <div className={styles.posIpt}>
      <div className={styles.posItem}>
        <span>x: </span>
        <InputNumber defaultValue={value && value[0]} onChange={handleChange.bind(_this, 0)} />
      </div>
      <div className={styles.posItem}>
        <span>y: </span>
        <InputNumber defaultValue={value && value[1]} onChange={handleChange.bind(_this, 1)} />
      </div>
    </div>
  );
});