import BaseForm from '@/components/BaseForm';
import React, { useEffect, useState } from 'react';
import {
  getLoginPage,
  getMapCofigs,
  getWebThemes,
  getProductList,
} from '@/services/webConfig/api';
import { Row, Col } from 'antd';
import { getDefaultGetWebconfig, singleStyleData, webMode } from '../utils';

const WebConfigForm = props => {
  const {
    hasIntegerate,
    config,
    onCancel,
    onSubmit,
    onOk,
    isEdit,
    submitting,
  } = props;
  const [webThemes, setWebThemes] = useState([]);
  const [mapConfigs, setMapConfigs] = useState([]);
  const [loginPages, setLoginPages] = useState([]);
  const [products, setProducts] = useState([]);
  const [form, setForm] = useState(null);

  const getForm = f => {
    setForm(f);
  };

  useEffect(() => {
    if (form) {
      form.setFieldsValue(config);
    }
  }, [config]);

  const onGetThemes = () => {
    if (webThemes.length === 0) {
      getWebThemes().then(res => setWebThemes(res));
    }
  };

  const onGetLoginPages = () => {
    if (loginPages.length === 0) {
      getLoginPage().then(res => setLoginPages(res.data));
    }
  };

  const onGetMapConfig = () => {
    if (mapConfigs.length === 0) {
      getMapCofigs().then(res => setMapConfigs(res));
    }
  };
  const onGetProduct = () => {
    if (products.length === 0) {
      getProductList().then(res => {
        if (res.code === 0) {
          setProducts(res.data);
        }
      });
    }
  };

  const itemsMap = getDefaultGetWebconfig({
    initialValues: config,
    submitting,
    hasIntegerate,
    webThemes,
    onGetThemes,
    loginPages,
    mapConfigs,
    onGetLoginPages,
    onGetMapConfig,
    products,
    onGetProduct,
    isEdit,
  });

  const formConfig = {
    getForm,
    items: Object.keys(itemsMap).map(k => ({
      ...itemsMap[k],
      dataIndex: k,
    })),
    buttons: [
      {
        text: '取消',
        type: 'cancel',
        size: 'middle',
        onClick: () => {
          // eslint-disable-next-line no-unused-expressions
          onCancel && onCancel();
        },
      },
      {
        text: '确定',
        htmlType: 'submit',
        type: 'primary',
        size: 'middle',
        loading: submitting,
        style: {
          marginLeft: '10px',
        },
      },
    ],
    buttonsWraper: bts => (
      <Row>
        <Col span={24} style={{ textAlign: 'right' }}>
          {bts}
        </Col>
      </Row>
    ),
  };

  return (
    <BaseForm
      {...formConfig}
      labelCol={{ span: 6 }}
      wrapperCol={{ span: 14 }}
      onValuesChange={v => {
        if (form && v.mode === webMode.single) {
          const sty = form.getFieldValue('style');
          if (!singleStyleData[sty]) {
            form.setFieldsValue([{ name: 'style', value: 'platform' }]);
          }
        }
      }}
      onFinish={values => {
        // eslint-disable-next-line no-unused-expressions
        onSubmit && onSubmit(values);
        // eslint-disable-next-line no-unused-expressions
        onOk && onOk(values);
      }}
    />
  );
};

export default WebConfigForm;
