import { Input, Select } from 'antd';
import React from 'react';
import FormItem from '../FormItem/FormItem'
import { getItemProps } from "../../utils"
import schema from "./schema"
const { Option } = Select

const Mobile = (item: any) => {
  const data: any = getItemProps(schema, item)
  const { componentType, ControlProps, ControlWapperProps, FormItemProps } = data
  const { placeholder } = ControlProps
  const { label } = FormItemProps
  const InputBox = () => {
    return <Input.Group compact {...ControlWapperProps} >
      <FormItem noStyle>
        <Select className='kx_antd_select' defaultValue="+86" style={{ width: 'fit-content' }}>
          <Option value="+86">+86 🇨🇳</Option>
        </Select>
      </FormItem>
      <FormItem
        noStyle
        FormItemProps={...FormItemProps}
      >
        <Input className='kx_antd_input' {...ControlProps} placeholder={placeholder || `请输入${label}`} />
      </FormItem>
    </Input.Group>
  }

  return <>
    {
      componentType === 'FormItem' ? <FormItem label={FormItemProps?.label}>
        {InputBox()}
      </FormItem> : InputBox()
    }
  </>
};

export default Mobile;