import {useState, memo, useEffect, useRef, forwardRef, useCallback} from 'react';
import { ProForm, ProFormText,ProFormDatePicker } from '@ant-design/pro-components';
import { Card, Input} from 'antd';
import {EditableTags} from '../../components/EditableTags.jsx';
const { TextArea } = Input;
const component = forwardRef(({data,onSubmit},ref) => {
  const formLayoutType = "horizontal";
  const [insert,setInsert] = useState(null);
  const [checkTag,setCheckTag]=useState(null);
  const formRef = useRef();

  useEffect(()=>{
    formRef?.current?.setFieldsValue(data);
  },[data])

  const tag = [
    {id:"1",label:"最近几天",insert:"最近<请输入值>天",value:'recentDay(${bizDate},_%%_)'},
    {id:"2",label:"最近几周",insert:"最近<请输入值>周",value:'recentWeek(${bizDate},_%%_)'},
    {id:"3",label:"最近几月",insert:"最近<请输入值>月",value:'recentMonth(${bizDate},_%%_)'},
    {id:"4",label:"最近几年",insert:"最近<请输入值>年",value:'recentYear(${bizDate},_%%_)'},
    {id:"5",label:"自然天",insert:"<请输入值>自然天",value:'dateDay(${bizDate},_%%_)'},
    {id:"6",label:"自然周",insert:"<请输入值>自然周",value:'dateWeek(${bizDate},_%%_)'},
    {id:"7",label:"自然月",insert:"<请输入值>自然月",value:'dateMonth(${bizDate},_%%_)'},
    {id:"8",label:"自然年",insert:"<请输入值>自然年",value:'dateYear(${bizDate},_%%_)'},
  ]

  const onTagSelect=useCallback((e)=>{
    setInsert(e.insert)
    setCheckTag(e)
  },[])

  const handleRegex=(insert,replace)=>{
    const regex = /<(\d+)>/;
    // 使用正则表达式进行匹配
    const match = insert.match(regex);
    if (match){
      return replace.replace("_%%_",match[1])
    }
    return null;
  }

  const onFinish= (values)=>{
    const id = data && data?.id
    if (checkTag){
      const expr = handleRegex(insert,checkTag.value);
      onSubmit({...values, id, expr});
    }
  }

  return (
    <>
      <ProForm
        formRef={formRef}
        layout={formLayoutType}
        onFinish={onFinish}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 18 }}
        submitter={{
          submitButtonProps: {
            style:{
              marginLeft:20,
              marginTop:20
            }
          },
          resetButtonProps: {
            style:{
              marginTop:20,
              marginLeft:'45%'
            }
          }
        }}
      >
        <Card type="inner" title="基本信息" bordered={false} ref={ref}>
          <ProFormText
            name="name"
            label="周期名称"
            rules={[{ required: true }]}
          />
          <ProFormText
            name="code"
            label="周期标识"
            rules={[{ required: true }]}
          />
          <ProFormText
            name="description"
            label="周期描述"
            placeholder="请输入详细的描述内容"
          />
          <ProFormText
            name="english"
            label="英文名称"
            placeholder="请输入"
          />
          <ProFormDatePicker name="startDate" label="生效日期" rules={[{ required: true }]} width="100%"/>
          <ProFormDatePicker name="stopDate" label="失效日期" width="100%"/>
        </Card>

        <Card bordered={false} type="inner" title="驱动脚本" ref={ref}>
          <EditableTags onSelect={onTagSelect} options={tag} style={{padding:0,backgroundColor:'initial',minHeight:0}}/>
          <TextArea
            value={insert}
            autoSize={{
              minRows: 4,
              maxRows: 4,
            }}
            onChange={(e)=>{setInsert(e.target.value)}}
            placeholder="例：最近<2>天"
          />
        </Card>
      </ProForm>
    </>
  )
})

export const TimeCycleForm = memo(component)
