import React, { useEffect, useState, useRef, FC, useCallback, ReactNode } from 'react';
import styles from './index.less';
import classNames from 'classnames';
import ScreenThemeComponent from './ScreenTheme';
import { connect } from 'react-redux';
import { resetSelect } from 'models/create-app';
import { getThemesConfig } from 'models/theme';
import { ThemeType, Status } from 'models/theme.types';

export interface ByIdType {
  [x: string]: any;
}
const ScreenTheme: FC<{
  children: ReactNode;
  dispatch: any;
  isClose: boolean;
  themeConfigList: ThemeType[];
  themeComponentById: ByIdType;
  config: any;
  onRecycleCallback: (visivle: boolean) => void;
  screensById: ByIdType;
  componentsById: ByIdType;
  panelsById: ByIdType;
}> = ({
  children,
  dispatch,
  themeComponentById,
  themeConfigList,
  config,
  isClose,
  screensById,
  componentsById,
  panelsById,
  onRecycleCallback
}) => {
  const [visible, setVisible] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const [status, setStatus] = useState(Status.CancelTask);

  useEffect(() => {
    dispatch(getThemesConfig());
  }, [dispatch]);

  useEffect(() => {
    !visible && onRecycleCallback(false);
  }, [visible]);

  useEffect(() => {
    !isClose && setVisible(false);
  }, [isClose]);

  useEffect(() => {
    const handleClick = (e) => {
      const headerDOM = document.getElementById('screen-header');
      if (!containerRef.current?.contains(e.target) && !headerDOM?.contains(e.target)) {
        const appDOM = document.getElementById('easyv-app');
        if (appDOM?.contains(e.target)) {
          setVisible(false);
        }
      }
    };

    document.addEventListener('click', handleClick, false);

    return () => {
      document.removeEventListener('click', handleClick,false);
    };
  }, []);

  const handleClose = useCallback(() => {
    status === Status.CancelTask && setVisible(false);
  }, [visible, status]);

  return (
    <div className={styles.themeContent}>
      <div className={styles.item} ref={containerRef}>
        <span
          onClick={() => {
            setVisible(true);
            dispatch(resetSelect());
          }}
          className={classNames({ [styles.info]: config?.open, [styles.active]: visible })}>
          {children}
        </span>

        <ScreenThemeComponent
          screensById={screensById}
          componentsById={componentsById}
          panelsById={panelsById}
          themeConfigList={themeConfigList}
          themeComponentById={themeComponentById}
          visible={visible}
          setStatus={setStatus}
          status={status}
          onClose={handleClose}
        />
      </div>
    </div>
  );
};

const mapStateToProps = ({ createApp, screensById, componentsById, panelsById, themes }) => {
  const { id } = createApp;
  const screen = screensById[id];
  let config = {};
  if (screen) {
    const { globalFilter } = screen;
    config = globalFilter;
  }

  return {
    config,
    screensById,
    componentsById,
    themeComponentById: themes.themeComponentById,
    themeConfigList: themes.themeConfigList,
    panelsById
  };
};

export default connect(mapStateToProps)(ScreenTheme);
