import ProForm from '@ant-design/pro-form';
import { Modal, Typography, message } from 'antd';
import { isNil } from 'lodash';
import { useEffect, useState } from 'react';
import { useDispatch, useIntl, useSelector } from 'umi';
import CustomDay from '../CustomDatePicker/CustomDay';
import SelectRole from '../SelectRole';
import { requestRenewal } from './api';
const { Text } = Typography;
const RenewalModel = ({ appId, openObj, setOpenObj, params }) => {
  const { formatMessage } = useIntl();
  const dispatch = useDispatch();
  const [value, setValue] = useState<API.RoleListItem>();
  const [roleData, setRoleData] = useState<any>();
  const [renewalParams, setRenewalParams] = useState<any>();
  useEffect(() => {
    if (openObj?.open) {
      dispatch({
        type: 'public/fetchAppDetail',
        payload: appId,
      });
    }
  }, [appId, openObj?.open, dispatch]);
  const { appDetail } = useSelector<{ public: API.StoreState }, API.StoreState>(
    (state: any) => state.public,
  );
  useEffect(() => {
    setRenewalParams(params);
    setRoleData((r) => {
      return {
        ...r,
        isRole: params?.optionList?.length > 0 ? true : false,
        expired: appDetail.defaultExpirationTime,
      };
    });
  }, [params, appDetail.defaultExpirationTime]);

  return (
    <Modal
      title={formatMessage({ id: 'pages.permission.renewal' })}
      open={openObj?.open}
      destroyOnClose={true}
      onCancel={() => {
        setOpenObj({ open: false, reload: false });
        setRoleData({});
        setValue(undefined);
      }}
      onOk={() => {
        if (isNil(roleData?.expired) || roleData?.expired === '') {
          message.warning(formatMessage({ id: 'base.renewal.time' }));
          return;
        }
        if (appDetail?.roleApprovalForData === 2 && roleData?.isRole && !roleData?.roleIdForData) {
          // 有数据权限时role是必选项
          // 必须选角色 但是没选角色时
          message.warning(formatMessage({ id: 'component.ApplyDetail.role.permission.require' }));
        } else {
          requestRenewal(renewalParams, appId, formatMessage, roleData);
          setOpenObj({ open: false, reload: true });
          setRoleData({});
          setValue(undefined);
        }
      }}
    >
      <ProForm.Item label={formatMessage({ id: 'base.renewal.time' })}>
        <CustomDay
          value={roleData?.expired / 86400}
          lengthLimit
          onChange={(val) => {
            setRoleData({ ...roleData, expired: val * 86400 });
          }}
        />
      </ProForm.Item>
      {appDetail?.roleApprovalForData === 2 && roleData?.isRole ? (
        <ProForm.Item label={formatMessage({ id: 'base.data.role' })}>
          <SelectRole
            appId={appId}
            value={value}
            onChange={(val) => {
              setValue(val);
              setRoleData({ ...roleData, roleIdForData: val.id });
            }}
          />
        </ProForm.Item>
      ) : null}
      <ProForm.Item>
        <Text> {formatMessage({ id: 'base.renewal.tips' })}</Text>
      </ProForm.Item>
      <Text />
    </Modal>
  );
};
export default RenewalModel;