import {memo,useEffect,useRef} from 'react';
import {Modal} from 'antd';
import {ProForm, ProFormDatePicker, ProFormText,ProFormTreeSelect} from '@ant-design/pro-components';
import {styled} from 'styled-components'
import {useAppSelector} from "../../../../redux/configureStore";
import {selectDomains} from "../../MainPage/slice/selectors";

const formLayoutType = "horizontal";

export const DomainForm = memo(({
  open,
  data,
  onCancel=()=>{},
  onFinish=()=>{}
}) => {
  const domains = useAppSelector(selectDomains);
  const formRef = useRef();

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

  const submitter = {
    submitButtonProps: {
      style:{
        marginLeft:20,
        marginTop:20
      }
    },
    resetButtonProps: {
      style:{
        marginTop:20,
        marginLeft:'45%'
      }
    }
  }
  return (
    <CustomModal
      width={800}
      title={<Title children="创建主题域"/>}
      open={open}
      footer={null}
      maskClosable={false}
      destroyOnClose
      onCancel={onCancel}
    >
      <ProForm
        formRef={formRef}
        layout={formLayoutType}
        onFinish={onFinish}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 18 }}
        submitter={submitter}
      >
        <ProFormTreeSelect
          name="parentId"
          label="上级主题"
          request={async ()=>domains}
        />
        <ProFormText
          name="name"
          label="主题名称"
          rules={[{ required: true }]}
        />
        <ProFormText
          name="description"
          label="主题描述"
        />
        <ProFormDatePicker name="startDate" label="生效日期" rules={[{ required: true }]} width="100%"/>
        <ProFormDatePicker name="stopDate" label="失效日期" width="100%"/>
      </ProForm>
    </CustomModal>
  )
})

const Title = styled.div`
  margin-left: 24px;
`

const CustomModal = styled(Modal)`
  .ant-modal-content{
    padding: 24px 0;
  }
`
