import React, { useEffect, useState } from 'react';
import PageContainer from '@/components/BasePageContainer';
import { notification, Spin, Tabs, Button } from 'antd';
import {
  getWebModuleTree,
  getWebconfig,
  postEditWebConfig,
  postAddWebSite,
  deleteWebsite,
  getAllConfigName,
  getProductList,
  getWebSite,
  addWebsite,
  editWebsite,
  omsDeleteWebsite,
  SyncMapComponent,
} from '@/services/webConfig/api';
import { EditTwoTone, ExclamationCircleOutlined } from '@ant-design/icons';
import Modal from 'antd/lib/modal/Modal';
import ProCard from '@ant-design/pro-card';
import styles from './index.less';
import SiteConfig from './components/siteConfigDrawer';
import { appConnector } from '@/containers/App/store';
import { defaultWebConfigObj, webMode } from './utils';
import MenuConfig from './menuconfig/MenuConfig';

const { TabPane } = Tabs;

const WebConfigPage = props => {
  const { userMode } = props;
  const [configVisible, setConfigVisible] = useState(false);
  const [loading, setLoading] = useState(false);
  const [webs, setWebs] = useState([]);
  const [curWeb, setCurWeb] = useState(''); // 当前展示的web
  const [configObj, setConfigObj] = useState({}); // 获取当前的web的配置
  const [toEdit, setToEdit] = useState(null); // 编辑展示用的配置
  const [isEdit, setIsEdit] = useState(true);
  const [submitting, setSubmitting] = useState(false);
  const [configFiles, setConfigFiles] = useState([]);
  const [productList, setProductList] = useState([]); // 产品列表

  const hasIntegerate = () => webs.some(w => w.id.startsWith(webMode.integration));

  useEffect(() => {
    let canceled = { cancel: false };
    setLoading(true);
    updateModuleTree(userMode || 'super', canceled);
    getAllConfigName().then(res => {
      if (!canceled.cancel) setConfigFiles(res.data);
    });
    getProduct();
    return () => {
      canceled.cancel = true;
    };
  }, []);

  useEffect(() => {
    console.log(curWeb, 'curWeb');
    let canceled = { cancel: false };
    if (!curWeb) return;
    const title = curWeb.text;
    updateWebconfig(title, canceled);

    // eslint-disable-next-line consistent-return
    return () => {
      canceled.cancel = true;
    };
  }, [curWeb]);
  // 获取产品列表
  const getProduct = () => {
    getProductList({ isDel: 0 }).then(res => {
      const { code } = res;
      if (code === 0) {
        const {
          data: { UserProducts },
        } = res;
        if (UserProducts && UserProducts.length > 0) {
          setProductList(UserProducts);
        }
      }
    });
  };

  const updateModuleTree = (userModePrama, canceled = { cancel: false }) => {
    setLoading(true);
    getWebModuleTree(userModePrama)
      .then(res => {
        const websArr = [
          // 暂时不要集成网站
          // res.data
          //   .filter(d => d.id === 'Web4IntegrateStation')
          //   .map(r =>
          //     r.children.map(c => ({
          //       ...c,
          //       subSystemValue: c.id.split(webMode.integration)[1],
          //     })),
          //   ),
          res.data
            .filter(d => d.id === 'Web4SingleStation')
            .map(r =>
              r.children.map(c => ({
                ...c,
                subSystemValue: c.id.split(webMode.single)[1],
              })),
            ),
        ].flat(2);
        if (!canceled.cancel) {
          console.log(websArr);
          setWebs(websArr);
          if (!curWeb) setCurWeb(websArr[0]);
          setLoading(false);
        }
      })
      .catch(err => {
        // eslint-disable-next-line no-console
        setLoading(false);
      });
  };

  const updateWebconfig = (webTitle, canceled = { cancel: false }) => {
    setLoading(true);
    return getWebconfig(webTitle)
      .then(res => {
        setLoading(false);
        if (!canceled.cancel) {
          setConfigObj(res.data);
          // setConfigObj(res.data);
          if (webTitle === curWeb.text) {
            setToEdit(res);
          }
        }
      })
      .catch(err => {
        setLoading(false);
        // eslint-disable-next-line no-console
        console.error(err);
      });
  };

  const handleDeleteWeb = (webToOperate, closeModal) => {
    // eslint-disable-next-line prefer-destructuring
    const client = webToOperate?.id?.split(
      webToOperate.id.startsWith(webMode.single) ? webMode.single : webMode.integration,
    )[1];
    if (client) {
      deleteWebsite(client)
        .then(res => {
          if (res.code === 0 || res.success) {
            notification.success({
              message: `删除网站${webToOperate.text}成功！`,
              duration: 3,
            });
            // updateModuleTree(userMode || 'super');
            if (webToOperate.id === curWeb.id) {
              setCurWeb(webs[0]);
            }
            // setTimeout(() => {
            updateModuleTree(userMode || 'super');
            // }, 500);
          } else {
            notification.error({
              message: res.message || `删除网站 ${webToOperate.text} 失败`,
            });
          }
          // eslint-disable-next-line no-unused-expressions
          closeModal && closeModal();
        })
        .catch(err => {
          // eslint-disable-next-line no-console
          console.error(err);
          notification.error({ message: '删除网站失败！', duration: 5 });
          // eslint-disable-next-line no-unused-expressions
          closeModal && closeModal();
        });
    }
  };

  const onEdit = (targetKey, action) => {
    const webToOperate = webs.find(w => w.id === targetKey);
    switch (action) {
      case 'add':
        setIsEdit(false);
        setToEdit(defaultWebConfigObj);
        setConfigVisible(true);
        break;
      case 'remove':
        Modal.confirm({
          title: '删除网站',
          icon: <ExclamationCircleOutlined />,
          content: (
            <span>
              删除网站{' '}
              <span style={{ fontWeight: 800, color: '#1890ff' }}>{webToOperate.text}</span>{' '}
              后将无法恢复, 确认删除?
            </span>
          ),
          okText: '确认',
          cancelText: '取消',
          onOk: closeModal => {
            handleDeleteWeb(webToOperate, closeModal);
          },
        });
        break;
      default:
    }
  };

  const onDrawerClose = form => {
    setConfigVisible(false);
  };

  const handleTabChange = v => {
    setCurWeb(webs.find(w => w.id === v));
  };
  const handleGeturl = val => {
    let url;
    const isSite = val.includes('CityTemp');
    if (isSite) {
      url = val;
    } else {
      url =
        localStorage.getItem('pd2-baseUrl') &&
        localStorage.getItem('pd2-baseUrl') != 'null' &&
        localStorage.getItem('pd2-baseUrl') != 'undefined'
          ? localStorage.getItem('pd2-baseUrl') + val
          : val;
    }
    return url;
  };
  const handleSubmit = val => {
    let { bannerLogo, logo, shortcutIcon, baseBannerUrl, baseIconUrl, baseLogoUrl } = val;
    baseBannerUrl = handleGeturl(bannerLogo);
    baseIconUrl = handleGeturl(shortcutIcon);
    baseLogoUrl = handleGeturl(logo);
    let values = {
      ...val,
      baseBannerUrl,
      baseIconUrl,
      baseLogoUrl,
    };
    setSubmitting(true);
    const requestMap = {
      postEditWebConfig,
      postAddWebSite,
    };
    // const requestMap = {
    //   addWebsite,
    //   editWebsite,
    // };

    const successMsg = isEdit ? '保存成功！' : '新增网站成功！';
    const failMsg = isEdit ? '编辑失败!' : '新增网站失败!';
    requestMap[isEdit ? 'postEditWebConfig' : 'postAddWebSite'](values)
      .then(res => {
        setSubmitting(false);
        if (res.code === 0 || res.success) {
          // setTimeout(() => {
          if (isEdit) {
            setCurWeb({ ...curWeb, text: values.title });
          } else {
            setCurWeb({ ...curWeb, text: values.title, id: res.data });
          }
          // }, 200);

          notification.success({
            message: successMsg,
            duration: 3,
          });
          setConfigVisible(false);
          // setTimeout(() => {
          updateModuleTree(userMode || 'super');
          // }, 500);
        } else {
          notification.warning({
            message: res.msg || failMsg,
            duration: 5,
          });
        }
      })
      .catch(err => {
        notification.error({
          message: failMsg,
          duration: 5,
        });
        // eslint-disable-next-line no-console
        console.error(err);
        setSubmitting(false);
      });
  };

  const handleUpdateOnMenuChange = () => {
    updateModuleTree(userMode || 'super');
  };

  const updateMenuTree = (type, menuNode) => {
    updateModuleTree(userMode || 'super');
  };

  const SyncMap = e => {
    console.log(e);
    SyncMapComponent({ visible: e.subSystemValue }).then(res => {
      if (res.code == 0) {
        notification.success({
          message: '提示',
          duration: 3,
          description: '同步成功',
        });
        updateModuleTree(userMode || 'super');
      } else {
        notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
        });
      }
    });
  };

  const renderTabPane = tabPaneItem => (
    <TabPane key={tabPaneItem.id} tab={tabPaneItem.text}>
      <>
        <ProCard className={styles.webConfigTabcontent}>
          <span
            className={styles.link}
            onClick={() => {
              setToEdit({ ...configObj });
              setConfigVisible(true);
              setIsEdit(true);
            }}
          >
            <EditTwoTone /> 查看/编辑网站配置
          </span>
          <div style={{ display: 'inline-block', float: 'right', marginTop: '-15px' }}>
            <strong style={{ marginRight: '15px' }}>
              地图组件数量
              {tabPaneItem.existMapComponent < 9 ? (
                <span style={{ color: 'red' }}>{tabPaneItem.existMapComponent}</span>
              ) : (
                <span style={{ color: '#1890ff' }}>{tabPaneItem.existMapComponent}</span>
              )}
            </strong>
            {tabPaneItem.existMapComponent < 9 && (
              <Button type="primary" onClick={() => SyncMap(tabPaneItem)}>
                一键修复
              </Button>
            )}
          </div>
          <MenuConfig
            menu={tabPaneItem?.children.find(w => w.menuType === 'Web4MenuRoot')}
            onUpdate={handleUpdateOnMenuChange}
            configFiles={configFiles}
            updateMenuTree={updateMenuTree}
            userMode={userMode}
            webid={tabPaneItem?.id}
            subSystemValue={tabPaneItem?.subSystemValue}
            productList={productList}
          />
        </ProCard>
      </>
    </TabPane>
  );

  return (
    <PageContainer>
      <div className={styles.webConfigContainer}>
        <Spin spinning={loading || submitting}>
          <Tabs
            type="editable-card"
            onEdit={onEdit}
            onChange={handleTabChange}
            activeKey={curWeb.id}
          >
            {/* <TabPane key={99} tab="产品配置" closable={false}>
              <ProductConfig />
            </TabPane> */}
            {/* {webs.map(renderTabPane)} */}
            {webs.map(item => renderTabPane(item))}
          </Tabs>
          <SiteConfig
            webs={webs}
            productList={productList}
            isEdit={isEdit}
            visible={configVisible}
            onClose={onDrawerClose}
            config={toEdit}
            onOk={handleSubmit}
            submitting={submitting}
            hasIntegerate={hasIntegerate()}
          />
        </Spin>
      </div>
    </PageContainer>
  );
};

export default appConnector(WebConfigPage);
