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';
import useI18NPrefix from "../../hooks/useI18NPrefix";
const { TextArea } = Input;
const component = forwardRef(({data,onSubmit},ref) => {
  const t = useI18NPrefix('global');
  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:t("time.recentDays"),insert:`${t("time.recent")}<${t("time.inputDate")}>${t("time.day")}`,value:'recentDay(${bizDate},_%%_)'},
    {id:"2",label:t("time.recentWeeks"),insert:`${t("time.recent")}<${t("time.inputDate")}>${t("time.week")}`,value:'recentWeek(${bizDate},_%%_)'},
    {id:"3",label:t("time.recentMonths"),insert:`${t("time.recent")}<${t("time.inputDate")}>${t("time.month")}`,value:'recentMonth(${bizDate},_%%_)'},
    {id:"4",label:t("time.recentYears"),insert:`${t("time.recent")}<${t("time.inputDate")}>${t("time.年")}`,value:'recentYear(${bizDate},_%%_)'},
    {id:"5",label:t("time.dateDay"),insert:`<${t("time.inputDate")}>${t("time.dateDay")}`,value:'dateDay(${bizDate},_%%_)'},
    {id:"6",label:t("time.dateWeek"),insert:`<${t("time.inputDate")}>${t("time.dateWeek")}`,value:'dateWeek(${bizDate},_%%_)'},
    {id:"7",label:t("time.dateMonth"),insert:`<${t("time.inputDate")}>${t("time.dateMonth")}`,value:'dateMonth(${bizDate},_%%_)'},
    {id:"8",label:t("time.dateYear"),insert:`<${t("time.inputDate")}>${t("time.dateYear")}`,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={t("title.baseInfo")} bordered={false} ref={ref}>
          <ProFormText
            name="name"
            label={t("formItem.name")}
            rules={[{ required: true }]}
          />
          <ProFormText
            name="code"
            label={t("formItem.code")}
            rules={[{ required: true }]}
          />
          <ProFormText
            name="description"
            label={t("formItem.description")}
            placeholder={t("placeholder.description")}
          />
          <ProFormText
            name="english"
            label={t("formItem.english")}
            placeholder={t("placeholder.english")}
          />
          <ProFormDatePicker name="startDate" label={t("formItem.startDate")} rules={[{ required: true }]} width="100%"/>
          <ProFormDatePicker name="stopDate" label={t("formItem.stopDate")} width="100%"/>
        </Card>

        <Card bordered={false} type="inner" title={t("title.scripts")} 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={t("time.exp")}
          />
        </Card>
      </ProForm>
    </>
  )
})

export const TimeCycleForm = memo(component)
