import {forwardRef, memo, useCallback, useState} from 'react'
import {
  ProCard,
  ProForm,
  ProFormDatePicker,
  ProFormSelect,
  ProFormText,
  ProFormTreeSelect
} from '@ant-design/pro-components'
import {Card, Col, Row} from 'antd'
import {styled} from 'styled-components'
import {LogicPanel} from '../../components/LogicPanel.jsx'
import {useAppDispatch, useAppSelector} from "../../../redux/configureStore";
import {selectDomains, selectModals} from "../MainPage/slice/selectors";
import {getAllModals, getModalDetail} from "../MainPage/slice/thunks";
import {CodeEditor} from "../../components/CodeEditor";
const formLayoutType = "horizontal";

const component = forwardRef(({
  onSubmit
},ref) => {
  const dispatch = useAppDispatch();
  const domains = useAppSelector(selectDomains);
  const modals = useAppSelector(selectModals);
  const [tab, setTab] = useState('tab1');
  const [modalDetail, setModalDetail] = useState();

  const onDomainChange = useCallback((domainId) => {
    dispatch(getAllModals({domainId}))
  },[])

  const onModalChange = useCallback((id) => {
    dispatch(getModalDetail({
      id,
      resolve(data){
        setModalDetail(data.modelDetail)
      }
    }))
  },[])

  const onFinish = useCallback((values)=>{
    onSubmit({
      ...values,
      defaultConfig:""
    })
  },[])

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

        <Card bordered={false} type="inner" title="业务限定规则" style={{boxShadow:'none'}}>
          <ProFormTreeSelect
            name="domainId"
            label="主题域"
            rules={[{ required: true }]}
            request={async ()=>domains}
            onChange={onDomainChange}
          />
          <ProFormSelect
            name="modelId"
            label="模型选择"
            rules={[{ required: true }]}
            options={modals}
            onChange={onModalChange}
          />
          <Row>
            <Col span={4}>
              <CardLabel children="条件设置:" className="required"/>
            </Col>
            <Col span={18}>
              <CustomProCard
                tabs={{
                  activeKey: tab,
                  items: [
                    {
                      key: 'tab1',
                      label: `字段配置`,
                      children: <LogicPanel options={modalDetail}/>,
                    },
                    {
                      key: 'tab2',
                      label: `自定义脚本`,
                      children: <CodeEditor value='123' onEditorChange={console.log} width="100%" height="480"/>,
                    }
                  ],
                  onChange: (key) => {
                    setTab(key);
                  },
                }}
              />
            </Col>
          </Row>
        </Card>
      </ProForm>
    </>
  )
})
export const BizConditionForm = memo(component);

const CustomProCard=styled(ProCard)`
  .ant-pro-card-body{
    padding: 0;
  }
`

const CardLabel = styled.label`
  position: absolute;
  right: 10px;
  top: 20px;
  &.required {
    // 添加必填红色*的样式
    &::before {
      display: inline-block;
      margin-inline-end: 4px;
      color: #ff4d4f;
      font-size: 14px;
      font-family: SimSun, sans-serif;
      line-height: 1;
      content: "*";
    }
  }
`
